Babel 6 regeneratorRuntime não está definido

Estou tentando usar o async, aguardo do zero no Babel 6, mas estou ficando o regeneratorRuntime não está definido.

arquivo .babelrc

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

arquivo package.json

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

arquivo .js

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

Usá-lo normalmente sem o async / await funciona muito bem. Alguma idéia do que estou fazendo de errado?

babel-polyfill é obrigatório. Você também deve instalá-lo para obter async / waitait trabalhando.

 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 com async / await (código de amostra)

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

No arquivo de boot

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

Se você estiver usando o webpack, você precisa colocá-lo como a primeira input como por @Cemen comentário:

 module.exports = { entry: ['babel-polyfill', './test.js'], output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, loader: 'babel', } ] } }; 

Se você deseja executar testes com o babel, use:

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

Além do polyfill, eu uso o babel-plugin-transform-runtime . O plugin é descrito como:

Externalize as referências a ajudantes e incorporados, preenchendo automaticamente o seu código sem poluir os globais. O que isso realmente significa? Basicamente, você pode usar built-ins como Promise, Set, Symbol, etc, bem como usar todos os resources do Babel que requerem um polyfill perfeitamente, sem poluição global, tornando-o extremamente adequado para bibliotecas.

Também inclui suporte para async / wait junto com outros built-ins do ES 6.

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

Em .babelrc , adicione o plugin de tempo de execução

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

Atualizar

Funciona se você definir o alvo para o Chrome. Mas pode não funcionar para outros alvos, por favor consulte: https://github.com/babel/babel-preset-env/issues/112

Portanto, essa resposta NÃO é adequada para a pergunta original. Vou mantê-lo aqui como referência para babel-preset-env .

Uma solução simples é adicionar import 'babel-polyfill' no início do seu código.

Se você usar o webpack, uma solução rápida é adicionar o babel-polyfill como mostrado abaixo:

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

Acredito que encontrei a última prática recomendada.

Confira este projeto: https://github.com/babel/babel-preset-env

 yarn add --dev babel-preset-env 

Use o seguinte como sua configuração do babel:

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

Em seguida, seu aplicativo deve estar disponível nas duas últimas versões do navegador Google Chrome.

Você também pode definir o Node como alvos ou ajustar a lista de navegadores de acordo com https://github.com/ai/browserslist

Diga-me o que, não me diga como.

Eu realmente gosto da filosofia do babel-preset-env : me diga qual ambiente você quer suportar, NÃO me diga como apoiá-los. É a beleza da programação declarativa.

Eu testei o async e await eles funcionem. Eu não sei como eles funcionam e eu realmente não quero saber. Eu quero gastar meu tempo com meu próprio código e minha lógica de negócios. Graças a babel-preset-env , isso me liberta do inferno da configuração de Babel.

Alternativamente, se você não precisa de todos os módulos que o babel-polyfill fornece, você pode especificar o babel-regenerator-runtime na configuração do seu webpack:

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

Ao usar o webpack-dev-server com o HMR, isso reduziu bastante o número de arquivos que ele deve compilar em cada compilation. Este módulo é instalado como parte do babel-polyfill portanto, se você já o tiver feito, caso contrário, poderá instalá-lo separadamente com o npm i -D babel-regenerator-runtime .

Minha solução simples:

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

.babelrc

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

Se estiver usando o babel-preset-stage-2 , basta iniciar o script com --require babel-polyfill .

No meu caso, esse erro foi lançado por testes Mocha .

Após corrigido o problema

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

babel-regenerator-runtime agora está obsoleto , em vez disso, deve-se usar o regenerator-runtime .

Para usar o gerador de tempo de execução com o webpack e o babel v7:

instale o regenerator-runtime :

 npm i -D regenerator-runtime 

Em seguida, adicione a configuração do Webpack:

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

Comecei a receber esse erro depois de converter meu projeto em um projeto datilografado. Pelo que entendi, o problema decorre de async / aguardar não ser reconhecido.

Para mim, o erro foi corrigido adicionando duas coisas à minha configuração:

  1. Como mencionei acima muitas vezes, precisei adicionar o babel-polyfill ao array de input do meu webpack:

      ...
    
     entry: ['babel-polyfill', './index.js'],
    
     ... 
  2. Eu precisava atualizar meu .babelrc para permitir a complicação de async / wait em geradores:

      {
       "predefinições": ["es2015"],
       "plugins": ["transform-async-to-generator"]
     } 

DevDependencies:

Eu tive que instalar algumas coisas no meu devDependencies no meu arquivo package.json também. Ou seja, estava faltando o babel-plugin-transformar-async-para-gerador, babel-polyfill e o 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:

Eu tenho o código de um GitHub realmente útil e conciso que você pode encontrar aqui .

Tenha cuidado com as funções içadas

Eu tinha tanto o ‘polyfill import’ e minha ‘function async’ no mesmo arquivo, no entanto eu estava usando a syntax de function que o eleva acima do polyfill que me daria o erro ReferenceError: regeneratorRuntime is not defined .

Altere este código

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

para isso

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

para evitar que ele seja içado acima da importação de polyfill.

Você está recebendo um erro porque os geradores async / await usam, que são um recurso ES2016, não o ES2015. Uma maneira de corrigir isso é instalar o preset do babel para o ES2016 ( npm install --save babel-preset-es2016 ) e compilar para o ES2016 em vez do ES2015:

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

Como as outras respostas mencionam, você também pode usar polyfills (mas certifique-se de carregar o polyfill antes de qualquer outro código ser executado). Alternativamente, se você não quiser include todas as dependencies de polyfill, você pode usar o babel-regenerator-runtime ou o babel-plugin-transform-runtime .

Nova resposta Por que você segue minha resposta?

Ans: Porque eu vou lhe dar uma resposta com o mais recente projeto Update version npm.

14/04/2017

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

Se você usar esta versão ou mais versão UP do NPM e todos os outros … Então só precisa mudar:

webpack.config.js

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

Depois de alterar os arquivos webpack.config.js Basta adicionar esta linha ao topo do seu código.

 import "babel-polyfill"; 

Agora verifique tudo está bem. Referência LINK

Também obrigado @BrunoLM por sua resposta agradável.

1 – Instale o babel-plugin-transforma-async-para-módulo-método, 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 – Adicione no seu js babel polyfill:

import 'babel-polyfill';

3 – Adicione o plugin no seu .babelrc:

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

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

Eu consertei esse erro instalando o babel-polyfill

 npm install babel-polyfill --save 

então eu importei meu ponto de input do aplicativo

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

para teste eu incluí –requerire babel-polyfill no meu script de teste

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

Eu tive esse problema no Chrome. Semelhante à resposta de RienNeVaPlu͢s, isso resolveu para mim:

 npm install --save-dev regenerator-runtime 

Então no meu código:

 import 'regenerator-runtime/runtime'; 

Feliz em evitar o extra de 200 kB de babel-polyfill .

Eu tinha uma configuração
com webpack usando presets: ['es2015', 'stage-0']
e mocha que estava executando testes compilados pelo webpack.

Para fazer com que o meu async/await nos testes funcione, tudo o que eu preciso fazer é adicionar a opção mocha --require babel-polyfill .

Eu recebo este erro usando gulp com rollup quando tentei usar geradores ES6:

 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 })); }); 

Em todo caso, a solução foi include o babel-polyfill como componente de bower:

 bower install babel-polyfill --save 

e adicione-o como dependência em index.html:

  

Se você estiver usando o Gulp + Babel para um frontend, você precisa usar o babel-polyfill

npm install babel-polyfill

e, em seguida, adicione uma tag de script a index.html acima de todas as outras tags de script e faça referência a babel-polyfill a partir de node_modules

A maioria dessas respostas recomenda soluções para lidar com esse erro usando o WebPack. Mas no caso de alguém estar usando o RollUp (como eu sou), aqui está o que finalmente funcionou para mim (apenas um heads-up e agrupando esses anúncios de polyfill sobre 10k até o tamanho da saída):

.babelrc

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

rollup.config.js

 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() ] }; 

Para quem quer usar o babel-polyfill versão 7 ^ faça isso com o webpack ver3 ^.

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

Então, no seu arquivo webpack no seu ponto de entry , faça isso

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

Os navegadores de destino que eu preciso para suportar que já suportam async / wait, mas quando se escreve testes mocha, sem a configuração adequada eu ainda tenho esse erro.

A maioria dos artigos que eu pesquisei estão desatualizados, incluindo a resposta aceita e as respostas mais votadas aqui, ou seja, você não precisa de polyfill , babel-regenerator-runtime , babel-plugin-transform-runtime . etc. se o (s) seu (s) navegador (es) alvo (s) já suportam async / await (claro que se você não precisar de polyfill)

Eu não quero usar o webpack também.

A resposta de Tyler Long está realmente no caminho certo, já que ele sugeriu babel-preset-env (mas eu omiti isso primeiro, como ele mencionou polifill no começo). Eu ainda tenho o ReferenceError: regeneratorRuntime is not defined no primeiro, então eu percebi que era porque eu não defini o alvo. Depois de definir o alvo para o nó, corrijo o erro regeneratorRuntime:

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

Eu tenho asynchronous esperando trabalhar com webpack / babel build:

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

.babelrc:

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

Em um cenário em que um arquivo babelHelpers.js personalizado é criado usando babel.buildExternalHelpers() com babel-plugin-external-helpsers que a solução menos custosa para o cliente é pré-append o regenerator-runtime/runtime.js à saída de todos os 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() ) 

Essa solução chega a cerca de 20 KB em vez de ~ 230 KB ao include o babel-polyfill .

Eu tive erro regeneratorRuntime não está definido quando eu usei ‘async’ e ‘await’ no meu aplicativo reagir ‘async’ e ‘ await ‘ é uma nova palavra- chave no ES7 para que você deve usar o babel-preset-es2017 instalar este devDependencies:

`

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

e usar isso

"presets": [ "es2017" , "stage-0" , "react" ]