javascript - regeneratorruntime - Babel 6 regenerator El tiempo de ejecución no está definido

regeneratorruntime is not defined parcel

Question

Estoy tratando de usar asíncrono, espero desde cero en Babel 6, pero obtengo 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 async / await funciona bien. ¿Alguna idea de lo que estoy haciendo mal?

Answer 1

Actualizar

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

Entonces, esta respuesta NO es adecuada para la pregunta original. Lo guardaré aquí como referencia a babel-preset-env .

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

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

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

Creo que he encontrado la mejor práctica más reciente.

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

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

Use lo siguiente como su configuración de babel:

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

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

También puede establecer Nodo como objetivos o ajustar la lista de navegadores de acuerdo con 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 apoyarlos. Es la belleza de la programación declarativa.

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

Answer 2

Tenga cuidado con las funciones izadas

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 la función que lo eleva por encima del polyfill que me daría el error ReferenceError: regeneratorRuntime is not defined .

Cambiar 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 de polyfill.

Answer 3

Babel 7.4.0, core-js 3

A partir de Babel 7.4.0 , @babel/polyfill is deprecated .

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

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

utilizará automáticamente regenerator-runtime y core-js acuerdo con su target . No es necesario importar nada manualmente. No olvide instalar dependencias de tiempo de ejecución:

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

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

 "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"
 }

Opción 2: @babel/transform-runtime con @babel/runtime (sin contaminación global)

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

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

Instalarlo:

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

Si usas polyfills core-js, instalas @babel/runtime-corejs2 o @babel/runtime-corejs3 en @babel/runtime-corejs3 lugar, mira here .

Salud

Answer 4

1 - Instalar babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird, babel-preset-es2015, babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Agregue su js babel polyfill:

import ''babel-polyfill'';

3 - Agregue el complemento en su .babelrc:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

Fuente: http://babeljs.io/docs/plugins/transform-async-to-module-method/

Answer 5

Actualice su archivo .babelrc acuerdo con los siguientes ejemplos, funcionará.

Si está utilizando el paquete @babel/preset-env

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

Answer 6

Además de polyfill, uso babel-plugin-transform-runtime . El complemento se describe como:

Externalice las referencias a los ayudantes y las incorporaciones, rellenando automáticamente su código sin contaminar a los globales. ¿Qué significa esto realmente? Básicamente, puede usar elementos integrados como Promise, Set, Symbol, etc., así como todas las funciones de Babel que requieren un polyfill sin problemas, sin contaminación global, lo que lo hace extremadamente adecuado para bibliotecas.

También incluye soporte para asíncrono / espera junto con otros elementos integrados de ES 6.

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

En .babelrc , agregue el complemento de tiempo de ejecución

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

Nota Si está utilizando babel 7, el paquete ha cambiado de nombre a babeljs.io/docs/en/babel-plugin-transform-runtime .

Answer 7

Alternativamente, si no necesita todos los módulos que proporciona babel-polyfill , puede especificar babel-regenerator-runtime en la configuración de su paquete web:

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

  // ...
};

Cuando se usa webpack-dev-server con HMR, esto reduce la cantidad de archivos que tiene que compilar en cada compilación en gran medida. Este módulo se instala como parte de babel-polyfill por lo que si ya lo tiene, puede instalarlo por separado con npm i -D babel-regenerator-runtime .

Answer 8

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

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

1. Como se mencionó anteriormente muchas veces, necesitaba agregar babel-polyfill en mi matriz de entrada de paquete web:

   npm install babel-polyfill --save

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

   import http from ''http'';
   import config from ''dotenv'';
   import ''babel-polyfill'';
   import { register } from ''babel-core'';
   import app from ''../app'';

DevDependencies:

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

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

Código completo Gist:

Obtuve el código de un resumen de GitHub realmente útil y conciso que puedes encontrar here .

Answer 9

En un escenario donde se crea un archivo babelHelpers.js personalizado usando babel.buildExternalHelpers() con babel-plugin-external-helpsers , pensé que la solución menos costosa para el cliente es anteponer el regenerator-runtime/runtime.js a la salida en su lugar de todos los polyfills.

// runtime.js npm install --save regenerator-runtime // building the custom babelHelper.js fs.writeFile( ''./babelHelpers.js'', fs.readFileSync(''node_modules/regenerator-runtime/runtime.js'') + ''/n'' + require(''babel-core'').buildExternalHelpers() )

Esta solución se reduce a aproximadamente 20 KB en lugar de ~ 230 KB cuando se incluye babel-polyfill .

Answer 10

Esta solución está desactualizada.

Encontré la solución en los comentarios de YouTube de este video https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg

Esto debería dirigir al comentario correcto. Mucho apoyo a "beth w" para encontrar la solución.

Beth W hace 3 meses (editado)
Otro cambio que tuve que hacer en 2019: babel ya no usa el preajuste stage-0 a partir de v7 aparentemente, así que a las 26:15 en lugar de ''npm install --save-dev babel-polyfill babel-preset-stage-0'', Tenía que hacer:

npm install --save @babel/polyfill

Que cubre las dos opciones anteriores. Luego, en el punto de entrada para la aplicación, yo> incluí ''@ babel / polyfill'', y en los ajustes preestablecidos de consulta lo dejé como está. Entonces la configuración del paquete web termina pareciéndose a:

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

Espero que ayude a alguien!

Answer 11

Estoy usando un proyecto React y Django y lo hice funcionar usando regenerator-runtime . Deberías hacer esto porque @babel/polyfill aumentará más el tamaño de tu aplicación y también está en desuso . También seguí los episodios 1 y 2 de este tutorial para crear la estructura de mi proyecto.

*package.json*

"presets": ["es2015", "stage-3"]

.babelrc

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    ''./babelHelpers.js'',
    fs.readFileSync(''node_modules/regenerator-runtime/runtime.js'')
    + ''/n''
    + require(''babel-core'').buildExternalHelpers()
)

index.js

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

Answer 12

La mayoría de estas respuestas recomiendan soluciones para tratar este error usando WebPack. Pero en caso de que alguien esté usando RollUp (como yo), esto es lo que finalmente funcionó para mí (solo un aviso y empaquetar estos anuncios de polyfill de aproximadamente 10k hasta el tamaño de salida):

.babelrc

import "@babel/polyfill";

....

rollup.config.js

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

Answer 13

Los navegadores específicos que necesito admitir ya admiten async / wait, pero cuando escribo pruebas de mocha, sin la configuración adecuada, todavía recibo este error.

La mayoría de los artículos que busqué en Google están desactualizados, incluida la respuesta aceptada y las respuestas con alta votación aquí, es decir, no necesita polyfill , babel-regenerator-runtime , babel-plugin-transform-runtime . etc. si su (s) navegador (es) de destino ya es compatible con async / wait (por supuesto, si no necesita polyfill)

Tampoco quiero usar webpack .

La respuesta de Tyler Long en realidad está en el camino correcto ya que sugirió babel-preset-env (pero lo omití primero ya que mencionó polifill al principio). Todavía tengo el ReferenceError: regeneratorRuntime is not defined al principio, luego me di cuenta de que era porque no había establecido el objetivo. Después de establecer el objetivo para el nodo, reparo el error regeneratorRuntime ：

import ''regenerator-runtime/runtime'';

Answer 14

Mi babel 7 repetitivo para reaccionar con el tiempo de ejecución del regenerador:

.babelrc

gulp.task(''scripts'', () => {
  return rollup({
    entry: ''./app/scripts/main.js'',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: ''node_modules/**'',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: [''./app/scripts''],
      external: [],
      extensions: [''.js'']
    })]
  })

  .pipe(source(''app.js''))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write(''.''))
  .pipe(gulp.dest(''.tmp/scripts''))
  .pipe(reload({ stream: true }));
});

package.json

bower install babel-polyfill --save

main.js

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

Answer 15

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"
  ]
}

Answer 16

Nueva respuesta ¿Por qué sigues mi respuesta?

Respuesta: Porque voy a darle una respuesta con la última versión de actualización del proyecto npm.

14/04/2017

npm i --save regenerator-runtime core-js

Si usa esta versión o más UP de Npm y todas las demás ... SO solo necesita cambiar:

webpack.config.js

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

Después de cambiar los archivos webpack.config.js Simplemente agregue esta línea al principio de su código.

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

Ahora verifique que todo esté bien. Link de referencia

También gracias @BrunoLM por su buena respuesta.

Answer 17

Obtendrá un error porque los generadores asíncronos / en espera usan, que son una función ES2016, no ES2015. Una forma de solucionar esto es instalar el preajuste de babel para ES2016 ( npm install --save babel-preset-es2016 ) y compilar a ES2016 en lugar de ES2015:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

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

Answer 18

Para las personas que buscan usar la versión 7 de babel-polyfill , haga esto con webpack ver3 ^.

Npm instala el módulo npm i -D @babel/polyfill

Luego, en su archivo webpack en su punto de entry , haga esto

entry: [''@babel/polyfill'', path.resolve(APP_DIR, ''App.js'')],

Answer 19

Para usuarios de babel7 y ParcelJS> = 1.10.0 usuarios

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

tomado de https://github.com/parcel-bundler/parcel/issues/1762

Answer 20

Recibo este error al usar gulp con rollup cuando intenté usar generadores ES6:

npm i -D @babel/preset-env
npm i @babel/polyfill

Puedo decir que la solución fue incluir babel-polyfill como componente de bower:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use ''usage'' for further codesize reduction, but it''s still ''experimental''
      }
    ]
  ]
}

y agregarlo como dependencia en index.html:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Answer 21

Se requiere babel-polyfill . También debe instalarlo para que funcione asincrónico / en espera.

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 muestra)

"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á usando webpack , debe ponerlo como el primer valor de su matriz de entry en su archivo de configuración de webpack (generalmente 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 desea ejecutar pruebas con babel, use:

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

Answer 22

Si está creando una aplicación, solo necesita el @babel/preset-env y @babel/polyfill :

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

(Nota: no necesita instalar los paquetes core-js y regenerator-runtime porque ambos han sido instalados por @ babel / polyfill)

Luego en .babelrc :

import resolve from ''rollup-plugin-node-resolve'';
import babel from ''rollup-plugin-babel'';
import uglify from ''rollup-plugin-uglify'';
import commonjs from ''rollup-plugin-commonjs'';


export default {
    input: ''src/entry.js'',
    output: {
        file: ''dist/bundle.js'',
        format: ''umd'',
        name: ''MyCoolLib'',
        exports: ''named''
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            ''node_modules/babel-runtime/helpers/asyncToGenerator.js'': [''default'']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: ''node_modules/**'', // only transpile our source code
        }),
        uglify()

    ]
};

Ahora configure sus entornos objetivo. Aquí, lo hacemos en el archivo .browserslistrc :

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

Finalmente, si useBuiltIns: "entry" , coloque import @babel/polyfill en la parte superior de su archivo de entrada. De lo contrario, ya está.

El uso de este método importará selectivamente esos polyfills y el archivo ''regenerator-runtime'' (arreglar su regeneratorRuntime is not defined problema regeneratorRuntime is not defined aquí) SOLO si son necesarios para cualquiera de sus entornos / navegadores de destino.

Answer 23

Si usa babel-preset-stage-2 , solo tiene que comenzar el script con --require babel-polyfill .

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

Siguiente solucionó el problema

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

Answer 24

Si usa Gulp + Babel para una interfaz de usuario, debe usar babel-polyfill

npm install babel-polyfill

y luego agregue una etiqueta de script a index.html sobre todas las demás etiquetas de script y haga referencia a babel-polyfill desde node_modules

Answer 25

Solucioné este error instalando babel-polyfill

import "babel-polyfill";

luego lo importé en el punto de entrada de mi aplicación

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

para probar incluí --require babel-polyfill en mi script de prueba

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

Answer 26

Tengo async esperando trabajar con webpack / babel build:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

.babelrc:

"presets": ["es2015", "stage-3"]

Answer 27

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

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

Luego en mi código:

npm install --save-dev regenerator-runtime

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

Answer 28

Tuve una configuración
con webpack usando presets: [''es2015'', ''stage-0'']
y mocha que ejecutaba pruebas compiladas por webpack.

Para hacer que mi trabajo async/await en las pruebas funcione, todo lo que tuve que hacer fue agregar la mocha --require babel-polyfill .

Answer 29

babel-regenerator-runtime ahora está en deprecated , en su lugar uno debería usar regenerator-runtime .

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

instalar regenerator-runtime :

npm i -D regenerator-runtime

Y luego agregue dentro de la configuración del paquete web:

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

Answer 30

Babel 7 usuarios

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

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

Y, en .babelrc, agregue:

yarn add --dev babel-preset-env