Babel 6 regeneratorRuntime n'est pas défini
J'essaie d'utiliser asynchrone, j'attends de zéro sur Babel 6, mais je suis en train de récupérer regeneratorRuntime.
fichier .babelrc
{
"presets": [ "es2015", "stage-0" ]
}
fichier package.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
fichier .js
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
L’utiliser normalement sans async/wait fonctionne très bien. Des idées que je fais mal?
babel-polyfill est requis. Vous devez également l'installer afin de pouvoir fonctionner en mode asynchrone.
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 avec async/wait (exemple de code)
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
Dans le fichier de démarrage
require("babel-core/register");
require("babel-polyfill");
Si vous utilisez webpack vous devez le mettre comme première entrée, conformément au commentaire @Cemen:
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
Si vous voulez exécuter des tests avec babel, utilisez:
mocha --compilers js:babel-core/register --require babel-polyfill
Outre polyfill, j'utilise babel-plugin-transform-runtime . Le plugin est décrit comme suit:
Externalisez les références aux helpers et aux fonctions intégrées, polyfillingant automatiquement votre code sans polluer les globaux. Qu'est-ce que cela signifie réellement cependant? Fondamentalement, vous pouvez utiliser des fonctions intégrées telles que Promise, Set, Symbol, etc., ainsi que toutes les fonctionnalités de Babel nécessitant un remplissage multiple de manière transparente, sans pollution globale, ce qui le rend extrêmement adapté aux bibliothèques.
Il inclut également la prise en charge de async/wait avec d’autres fonctionnalités intégrées de ES 6.
$ npm install --save-dev babel-plugin-transform-runtime
Dans .babelrc, ajoutez le plugin d'exécution
{
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
Mettre à jour
Cela fonctionne si vous définissez la cible sur Chrome. Mais cela pourrait ne pas fonctionner pour d'autres cibles, veuillez vous référer à: https://github.com/babel/babel-preset-env/issues/112
Donc, cette réponse est PAS tout à fait appropriée pour la question initiale. Je vais le garder ici comme référence à babel-preset-env.
Une solution simple consiste à ajouter import 'babel-polyfill' au début de votre code.
Si vous utilisez webpack, une solution rapide consiste à ajouter babel-polyfill comme indiqué ci-dessous:
entry: {
index: ['babel-polyfill', './index.js']
}
Je pense avoir trouvé les dernières meilleures pratiques.
Vérifiez ce projet: https://github.com/babel/babel-preset-env
yarn add --dev babel-preset-env
Utilisez ce qui suit comme configuration de votre babel:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
Ensuite, votre application devrait pouvoir être utilisée dans les deux dernières versions du navigateur Chrome.
Vous pouvez également définir Node comme cibles ou ajuster la liste des navigateurs en fonction de https://github.com/ai/browserslist
Dis-moi quoi, ne me dis pas comment.
J'aime beaucoup la philosophie de babel-preset-env: dites-moi quel environnement vous voulez supporter, ne me dites pas comment les supporter. C'est la beauté de la programmation déclarative.
J'ai testé asyncawait et ils fonctionnent. Je ne sais pas comment ils fonctionnent et je ne veux vraiment pas savoir. Je veux plutôt passer mon temps sur mon propre code et ma logique métier. Grâce à babel-preset-env, cela me libère de l'enfer de la configuration de Babel.
Sinon, si vous n'avez pas besoin de tous les modules fournis par babel-polyfill, vous pouvez simplement spécifier babel-regenerator-runtime dans la configuration de votre pack Web:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
Lors de l'utilisation de webpack-dev-server avec HMR, cela réduisait considérablement le nombre de fichiers qu'il doit compiler pour chaque build. Ce module est installé dans le cadre de babel-polyfill. Par conséquent, si vous possédez déjà votre état, sinon vous pouvez l’installer séparément avec npm i -D babel-regenerator-runtime.
Ma solution 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"
]
}
Babel 7 utilisateurs
J'ai eu du mal à résoudre ce problème car la plupart des informations étaient pour les versions précédentes de Babel. Pour Babel 7, installez ces deux dépendances:
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
Et, dans .babelrc, ajoutez:
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}
babel-regenerator-runtime est maintenant deprecated , utilisez plutôt regenerator-runtime.
Pour utiliser le générateur d’exécution avec webpack et babel v7:
installer regenerator-runtime:
npm i -D regenerator-runtime
Et ajoutez ensuite dans la configuration webpack:
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
Attention aux fonctions levées
J'avais mon «import polyfill» et ma «fonction asynchrone» dans le même fichier, mais j'utilisais la syntaxe de la fonction qui le hisse au-dessus du polyfill, ce qui me donnerait l'erreur ReferenceError: regeneratorRuntime is not defined.
Changer ce code
import "babel-polyfill"
async function myFunc(){ }
pour ça
import "babel-polyfill"
var myFunc = async function(){}
pour l'empêcher d'être hissé au-dessus de l'importation polyfill.
Si vous utilisez babel-preset-stage-2, il vous suffit de démarrer le script avec --require babel-polyfill.
Dans mon cas, cette erreur a été générée par les tests Mocha.
Suite résolu le problème
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
J'ai commencé à avoir cette erreur après avoir converti mon projet en projet TypeScript. D'après ce que je comprends, le problème provient de l'async/attend de ne pas être reconnu.
Pour moi, l'erreur a été corrigée en ajoutant deux choses à ma configuration:
Comme mentionné ci-dessus à plusieurs reprises, j'avais besoin d'ajouter babel-polyfill dans mon tableau d'entrée de pack Web:
... entrée: ['babel-polyfill', './index.js'], ...
Je devais mettre à jour mon fichier .babelrc pour permettre la compilation asynchrone/wait dans les générateurs:
{ "presets": ["es2015"], "plugins": ["transform-async-to-generator"] }
DevDependencies:
Je devais également installer quelques éléments dans mon devDependencies dans mon fichier package.json. Il me manquait notamment babel-plugin-transform-async-to-generator, babel-polyfill et 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"
}
Description complète du code:
J'ai reçu le code d'un Gist Gist vraiment utile et concis que vous pouvez trouver ici .
Babel 7.4.0, core-js 3
À partir de Babel 7.4. , @babel/polyfillestobsolète .
En général, il existe deux manières d'installer polyfills/regenerator: via un espace de noms global (Option 1) ou en tant que ponyfill (Option 2, sans pollution globale).
Option 1: @babel/preset-env
presets: [
["@babel/preset-env", {
useBuiltIns: "usage",
corejs: 3, // or 2,
targets: {
firefox: "64", // or whatever target to choose .
},
}]
]
utilisera automatiquement regenerator-runtime et core-js en fonction de votre cible . Pas besoin d'importer quoi que ce soit manuellement. N'oubliez pas d'installer les dépendances d'exécution:
npm i --save regenerator-runtime core-js
Sinon, définissez useBuiltIns: "entry" et importez-le manuellement:
import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed
Option 2: @babel/transform-runtime avec @babel/runtime (pas de pollution globale)
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true,
corejs: 3 // or 2; if polyfills needed
...
}
]
]
}
Installez-le:
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime
Si vous utilisez des polyfillages core-js, vous installerez plutôt @babel/runtime-corejs2 ou @babel/runtime-corejs3, voir ici .
À votre santé
Correction de virgules manquantes, l'édition minimale est de 6 caractères
Vous obtenez une erreur car async/wait utilise les générateurs, qui sont une fonctionnalité ES2016, pas ES2015. Une solution consiste à installer le préréglage babel pour ES2016 (npm install --save babel-preset-es2016) et à le compiler en ES2016 au lieu de ES2015:
"presets": [
"es2016",
// etc...
]
Comme mentionné dans les autres réponses, vous pouvez également utiliser polyfills (assurez-vous de charger chargez d'abord le polyfill avant tout autre code). Sinon, si vous ne voulez pas inclure toutes les dépendances polyfill, vous pouvez utiliser le babel-regenerator-runtime ou le babel-plugin-transform-runtime .
Mettez à jour votre fichier .babelrc en fonction des exemples suivants, cela fonctionnera.
Si vous utilisez le package @babel/preset-env
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
or if you are using babel-preset-env package
{
"presets": [
[
"env", {
"targets": {
"node": "current"
}
}
]
]
}
Nouvelle réponse Pourquoi suivez-vous ma réponse?
_ {Ans: Parce que je vais vous donner une réponse avec le dernier projet de mise à jour 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"
_ {Si vous utilisez cette version ou plus de la version UP de Npm et de toutes les autres ... Il suffit donc de changer:
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
Après avoir modifié les fichiers webpack.config.js, ajoutez simplement cette ligne en haut de votre code.
import "babel-polyfill";
Maintenant, vérifiez que tout va bien. Référence LINK
Merci également à @BrunoLM pour sa réponse intéressante.
J'ai corrigé cette erreur en installant babel-polyfill
npm install babel-polyfill --save
puis je l'ai importé dans mon point d'entrée d'application
import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';
pour tester j'ai inclus --exige babel-polyfill dans mon script de test
"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers
js:babel-core/register --require babel-polyfill server/test/**.js --exit"
Aux utilisateurs de babel7 et aux utilisateurs de ParcelJS> = 1.10.0
npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core
.babelrc
{
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 2
}]
]
}
extrait de https://github.com/parcel-bundler/parcel/issues/1762
Les navigateurs ciblés que je dois prendre en charge prennent déjà en charge async/wait, mais lors de l'écriture de tests mocha, sans le réglage approprié, j'ai toujours eu cette erreur.
La plupart des articles que j'ai trouvés sur Google sont périmés, y compris la réponse acceptée et les réponses à vote élevé ici, c'est-à-dire que vous n'avez pas besoin de polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc. si votre (vos) navigateur (s) cible (s) supporte déjà async/wait (bien sûr si vous avez besoin de polyfill)
Je ne veux pas utiliser webpack non plus.
La réponse de Tyler Long est en fait sur la bonne voie puisqu'il a suggéré babel-preset-env (mais je l'ai omis d'abord car il a mentionné polifill au début). J'ai toujours eu le ReferenceError: regeneratorRuntime is not defined au premier puis j'ai réalisé que c'était parce que je n'avais pas défini la cible. Après avoir défini la cible pour le noeud, je corrige l'erreur 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
}]
]
}
J'ai eu ce problème dans Chrome. Semblable à la réponse de RienNeVaPlu͢s, cela a résolu le problème pour moi:
npm install --save-dev regenerator-runtime
Puis dans mon code:
import 'regenerator-runtime/runtime';
Heureux d'éviter les 200 kB supplémentaires de babel-polyfill.
1 - Installez la méthode babel-plugin-transform-async-à-module, 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 - Ajoutez dans votre js babel polyfill:
import 'babel-polyfill';
3 - Ajouter un plugin dans votre .babelrc:
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
Source: http://babeljs.io/docs/plugins/transform-async-to-module-method/
Pour ceux qui cherchent à utiliser le babel-polyfill version 7 ^ faites ceci avec webpack ver3 ^.
Npm installe le module npm i -D @babel/polyfill
Puis dans votre fichier webpack dans votre entry point faites ceci
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
J'obtiens cette erreur en utilisant gulp avec rollup lorsque j'ai essayé d'utiliser des générateurs 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 }));
});
Je pense que la solution consistait à inclure babel-polyfill en tant que composant Bower:
bower install babel-polyfill --save
et l'ajouter comme dépendance dans index.html:
<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
J'ai eu une configuration
avec webpack en utilisant presets: ['es2015', 'stage-0']
et mocha qui exécutait des tests compilés par webpack.
Pour que mon async/await dans les tests fonctionne, tout ce que je devais faire était d’ajouter l’option mocha --require babel-polyfill.
Mon travail babel 7 passe-partout pour réagir avec le temps de fonctionnement du régénérateur:
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": true,
},
},
],
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-syntax-class-properties",
"@babel/plugin-proposal-class-properties"
]
}
package.json
...
"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",
...
main.js
import "@babel/polyfill";
....
La plupart de ces réponses recommandent des solutions pour traiter cette erreur à l'aide de WebPack. Mais au cas où quelqu'un utiliserait RollUp (comme moi), voici ce qui a finalement fonctionné pour moi (juste un avertissement et une offre groupée de ces annonces polyfill d'environ 10 000 à la taille de sortie):
.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()
]
};
Si vous utilisez Gulp + Babel pour une interface, vous devez utiliser babel-polyfill
npm install babel-polyfill
puis ajoutez une balise de script à index.html au-dessus de toutes les autres balises de script et référence babel-polyfill à partir de node_modules
regeneratorRuntime n'a pas d'erreur définie. lorsque j'ai utilisé 'async' et 'wait' dans mon application de réaction 'async' et 'wait' est un nouveau mot clé dans ES7 pour que vous devriez utiliser babel-preset-es2017 installez cette devDependencies:
`
"babel-preset-es2017": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", `
et utiliser cette
"presets": [ "es2017" , "stage-0" , "react" ]
Cette solution est obsolète.
J'ai trouvé la solution dans les commentaires youtube de cette vidéo https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg
Cela devrait diriger vers le commentaire correct. Beaucoup d’appuis à "beth w" pour trouver la solution.
Beth W il y a 3 mois (modifié)
Un autre changement que j’ai dû faire en 2019: apparemment, babel n’utilise plus le préréglage stage-0 à partir de la v7; donc, à 26h15 au lieu de 'npm install --save-dev babel-polyfill babel-preset- stage-0 ', je devais faire:
npm install --save @babel/polyfillCe qui couvre les deux options les plus anciennes. Ensuite, dans le point d'entrée de l'application, j'ai inclus "@ babel/polyfill", et dans les préréglages de requête, je l'ai laissé tel quel. Donc, la configuration du webpack ressemble à ceci:
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill', './src/app.js']
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
mode: 'development',
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}]
}
}
J'espère que ça aide quelqu'un!
Je rencontrais ce problème lorsque j'essayais de lancer Mocha + Babel. J'avais un .babelrc qui fonctionnait en développement (voir les autres réponses ici, elles sont assez complètes), mais ma commande npm run test se plaignait toujours de regeneratorRuntime is not defined. J'ai donc modifié mon package.json:
"scripts": {
"test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}
En savoir plus: https://babeljs.io/en/setup/#mocha-4
J'ai async attendent de travailler avec webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
Si vous construisez une application, vous avez simplement besoin des @babel/preset-env et @babel/polyfill:
npm i -D @babel/preset-env
npm i @babel/polyfill
(Remarque: vous n'avez pas besoin d'installer les packages core-js et regenerator-runtime car ils auront tous deux été installés par @ babel/polyfill)
Puis dans .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry" // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
}
]
]
}
Maintenant, définissez vos environnements cibles. Ici, nous le faisons dans le fichier .browserslistrc:
# Browsers that we support
>0.2%
not dead
not ie <= 11
not op_mini all
Enfin, si vous utilisez useBuiltIns: "entry", mettez import @babel/polyfill en haut de votre fichier d’entrée. Sinon, vous avez terminé.
Utiliser cette méthode importera sélectivement ces polyfill et le fichier 'regenerator-runtime' (en corrigeant votre problème regeneratorRuntime is not defined ici)UNIQUEMENTs'ils sont nécessaires à l'un de vos environnements/navigateurs cibles.
J'utilise un projet React et Django et je l'ai obtenu en utilisant regenerator-runtime. Vous devriez le faire car @babel/polyfill augmentera davantage la taille de votre application et sera également obsolète . J'ai également suivi ce tutoriel les épisodes 1 et 2 pour créer mon projet structure .
*package.json*
...
"devDependencies": {
"regenerator-runtime": "^0.13.3",
...
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties"]
}
index.js
...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...
Dans un scénario où un fichier babelHelpers.js personnalisé est créé à l'aide de babel.buildExternalHelpers() avec babel-plugin-external-helpsers, la solution la moins coûteuse pour le client consiste à ajouter le regenerator-runtime/runtime.js à la sortie au lieu de tous les polyfill.
// 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()
)
Cette solution revient à environ 20 Ko au lieu de ~ 230 Ko en incluant babel-polyfill.