Búsqueda de sitios web

javascript - Babel 6 regeneratorRuntime no está definido

Estoy tratando de usar async/await desde cero en Babel 6, pero me aparece que regeneratorRuntime no está definido.

archivo .babelrc

{
    "presets": [ "es2015", "stage-0" ]
}

archivo package.json

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

archivo .js

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Usarlo normalmente sin el async/await funciona perfectamente. ¿Alguna idea de qué estoy haciendo mal?

Respuesta #1

Se requiere babel-polyfill (obsoleto desde Babel 7.4). También debe instalarlo para que async/await funcione.

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js con async/await (código de ejemplo)

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

En el archivo de inicio

require("babel-core/register");
require("babel-polyfill");

Si estás usando webpack, necesitas ponerlo como el primer valor de tu arreglo entry en tu archivo de configuración de webpack (usualmente webpack.config.js), según el comentario de @Cemen:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

Si quieres ejecutar pruebas con Babel, entonces usa:

mocha --compilers js:babel-core/register --require babel-polyfill

Respuesta #2

Nota Si estás usando Babel 7, el paquete ha sido renombrado a @babel/plugin-transform-runtime.

Además del polyfill, utilizo babel-plugin-transform-runtime. El plugin se describe como:

Externaliza las referencias a ayudantes y funciones integradas, llenando automáticamente tu código con polyfills sin contaminar los globals. ¿Qué significa esto realmente? Básicamente, puedes usar funciones integradas como Promise, Set, Symbol, etc., así como todas las características de Babel que requieren un polyfill de manera fluida, sin contaminación global, lo que lo hace extremadamente adecuado para bibliotecas.

También incluye soporte para async/await junto con otros elementos integrados de ES 6.

npm install --save-dev babel-plugin-transform-runtime

En .babelrc, añade el complemento de tiempo de ejecución

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

Respuesta #3

Usuarios de Babel 7

Tuve algunos problemas para resolver esto ya que la mayoría de la información era para versiones anteriores de Babel. Para Babel 7, instala estas dos dependencias:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

Y, en .babelrc, añade:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Respuesta #4

Actualizar

Funciona si configuras el objetivo en Chrome. Pero podría no funcionar para otros objetivos, por favor consulta: https://github.com/babel/babel-preset-env/issues/112

Así que esta respuesta NO es muy adecuada para la pregunta original. La mantendré aquí como referencia para babel-preset-env.

Una solución simple es agregar import 'babel-polyfill' al principio de tu código.

Si usas webpack, una solución rápida es añadir babel-polyfill como se muestra a continuación:

entry: {
    index: ['babel-polyfill', './index.js']
}

Creo que he encontrado la última mejor práctica.

Revisa este proyecto: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Usa lo siguiente como tu configuración de Babel:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Entonces tu aplicación debería estar lista para funcionar en las últimas 2 versiones del navegador Chrome.

También puedes establecer Node como los objetivos o ajustar la lista de navegadores según https://github.com/ai/browserslist

Dime qué, no me digas cómo.

Realmente me gusta la filosofía de babel-preset-env: dime qué entorno quieres soportar, NO me digas cómo soportarlos. Esa es la belleza de la programación declarativa.

He probado async await y SÍ funcionan. No sé cómo funcionan y realmente no quiero saberlo. Quiero dedicar mi tiempo a mi propio código y a mi lógica de negocio en su lugar. Gracias a babel-preset-env, me libera del infierno de la configuración de Babel.

Respuesta #5

Actualización: La publicación de Babel 7 también tiene una respuesta más detallada.

Babel 7.4.0 o posterior (core-js 2/3)

A partir de Babel 7.4.0, @babel/polyfill está obsoleto.

En general, hay dos formas de instalar polyfills/regenerator: a través del espacio de nombres global (Opción 1) o como ponyfill (Opción 2, sin contaminación global).

Opción 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3, // or 2,
    "targets": {
        "firefox": "64", // or whatever target to choose .    
    },
  }]
]

usará automáticamente regenerator-runtime y core-js según su objetivo. No es necesario importar nada manualmente. No olvide instalar las dependencias en tiempo de ejecución:

npm i --save regenerator-runtime core-js

Alternativamente, configure useBuiltIns: "entry" e impórtelo manualmente:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Opción 2: @babel/transform-runtime con @babel/runtime

Esta alternativa no provoca contaminación del ámbito global y es adecuada para bibliotecas.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        "corejs": 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

Si se utiliza el polyfill corejs, reemplazas @babel/runtime con @babel/runtime-corejs2 (para "corejs": 2) o @babel/runtime-corejs3 (para "corejs": 3).

Respuesta #6

Alternativamente, si no necesitas todos los módulos que babel-polyfill proporciona, puedes simplemente especificar babel-regenerator-runtime en tu configuración de webpack:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

Al usar webpack-dev-server con HMR, hacer esto redujo considerablemente la cantidad de archivos que tiene que compilar en cada compilación. Este módulo se instala como parte de babel-polyfill, por lo que si ya lo tienes, estás bien; de lo contrario, puedes instalarlo por separado con npm i -D babel-regenerator-runtime.

Respuesta #7

Este error se produce cuando se utilizan funciones async/await sin los complementos de Babel adecuados. A partir de marzo de 2020, lo siguiente debería ser todo lo que necesitas hacer. (@babel/polyfill y muchas de las soluciones aceptadas han sido desaprobadas en Babel. Lee más en la documentación de Babel.)

En la línea de comandos, escriba:

npm install --save-dev @babel/plugin-transform-runtime

En tu archivo babel.config.js, añade este plugin @babel/plugin-transform-runtime. Nota: El siguiente ejemplo incluye los otros presets y plugins que tengo para un pequeño proyecto de React/Node/Express en el que trabajé recientemente:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Respuesta #8

Mi solución simple:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

Respuesta #9

babel-regenerator-runtime ahora está obsoleto, en su lugar se debe usar regenerator-runtime.

Para usar el generador en tiempo de ejecución con webpack y babel v7:

instala regenerator-runtime:

npm i -D regenerator-runtime

Y luego agrega dentro de la configuración de webpack :

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

Respuesta #10

Actualiza tu archivo .babelrc según los siguientes ejemplos, funcionará.

Si estás usando el paquete @babel/preset-env

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Respuesta #11

A partir de octubre de 2019 esto funcionó para mí:

Añade esto al preajuste.

 "presets": [
      "@babel/preset-env"
    ]

Luego instala regenerator-runtime usando npm.

npm i regenerator-runtime

Y luego, en tu archivo principal usa: (esta importación se usa solo una vez)

import "regenerator-runtime/runtime";

Esto le permitirá usar async awaits en su archivo y eliminar el error regenerator

Respuesta #12

Ten cuidado con las funciones elevadas

Tenía tanto mi 'importación de polyfill' como mi 'función asíncrona' en el mismo archivo, sin embargo estaba usando la sintaxis de función que la eleva por encima del polyfill, lo que me daba el error ReferenceError: regeneratorRuntime no está definido.

Cambia este código

import "babel-polyfill"
async function myFunc(){ }

a esto

import "babel-polyfill"
var myFunc = async function(){}

para evitar que se eleve por encima de la importación del polyfill.

Respuesta #13

Usé un consejo de https://github.com/babel/babel/issues/9849#issuecomment-592668815 y añadí targets: { esmodules: true,} a mi babel.config.js.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

Respuesta #14

Tuve este problema en Chrome. Similar a la respuesta de RienNeVaPlu͢s, esto me lo resolvió:

npm install --save-dev regenerator-runtime

Entonces en mi código:

import 'regenerator-runtime/runtime';

Feliz de evitar los 200 kB extra de babel-polyfill.

Respuesta #15

Si usas babel-preset-stage-2, entonces solo tienes que iniciar el script con --require babel-polyfill.

En mi caso, este error fue lanzado por las pruebas de Mocha.

Seguir arregló el problema

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

Respuesta #16

Estás recibiendo un error porque async/await usan generadores, que son una característica de ES2016, no de ES2015. Una forma de solucionar esto es instalar el preset de Babel para ES2016 (npm install --save babel-preset-es2016) y compilar a ES2016 en lugar de ES2015:

"presets": [
  "es2016",
  // etc...
]

Como mencionan otras respuestas, también puedes usar polyfills (aunque asegúrate de cargar el polyfill primero antes de que se ejecute cualquier otro código). Alternativamente, si no quieres incluir todas las dependencias del polyfill, puedes usar babel-regenerator-runtime o babel-plugin-transform-runtime.

Respuesta #17

Comencé a recibir este error después de convertir mi proyecto en un proyecto de TypeScript. Por lo que entiendo, el problema proviene de que async/await no es reconocido.

Para mí, el error se solucionó añadiendo dos cosas a mi configuración:

  1. Como se mencionó arriba muchas veces, necesitaba agregar babel-polyfill en mi arreglo de entradas de webpack:

    ...

entry: ['babel-polyfill', './index.js'],

...

  2. Necesitaba actualizar mi .babelrc para permitir la compilación de async/await en generadores:

    {
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

Dependencias de desarrollo:

También tuve que instalar algunas cosas en mis devDependencies en mi archivo package.json. A saber, me faltaban babel-plugin-transform-async-to-generator, babel-polyfill y babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

Código completo Gist:

Obtuve el código de un gist de GitHub realmente útil y conciso que puedes encontrar aquí.

Artículos relacionados