Ik probeer async te gebruiken, vanaf nul af te wachten op Babel 6, maar ik krijg regeneratorRuntime is niet gedefinieerd.

.babelrc-bestand

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

pakket.json-bestand

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

.js-bestand

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

Het normaal gebruiken zonder de async/wait werkt prima. Enig idee wat ik verkeerd doe?

---

Antwoord 1, autoriteit 100%

babel-polyfill(verouderdvanaf Babel 7.4 ) Is benodigd. Je moet het ook installeren om async/wait te laten werken.

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

pakket.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 met async/wait (voorbeeldcode)

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

In het opstartbestand

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

Als u webpackgebruikt, moet u dit als eerste waarde van uw entry-array in uw webpack-configuratiebestand plaatsen (meestal webpack.config.js), volgens de opmerking van @Cemen:

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

Als je tests met babel wilt uitvoeren, gebruik dan:

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

---

Antwoord 2, autoriteit 53%

Opmerking
Als je babel 7 gebruikt, is het pakket hernoemd naar @babel/plugin- transform-runtime.

Naast polyfill gebruik ik babel-plugin-transform-runtime . De plug-in wordt beschreven als:

Externaliseer verwijzingen naar helpers en ingebouwde functies, waarbij je code automatisch polyfill wordt zonder globals te vervuilen. Wat betekent dit echter eigenlijk? In principe kunt u ingebouwde functies zoals Promise, Set, Symbol enz. gebruiken en alle Babel-functies die een polyfill vereisen naadloos gebruiken, zonder wereldwijde vervuiling, waardoor het uitermate geschikt is voor bibliotheken.

Het bevat ook ondersteuning voor async/wait samen met andere ingebouwde functies van ES 6.

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

Voeg in .babelrcde runtime-plug-in toe

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

---

Antwoord 3, autoriteit 39%

Babel 7-gebruikers

Ik had wat problemen om dit te omzeilen, aangezien de meeste informatie voor eerdere babel-versies was. Installeer voor Babel 7 deze twee afhankelijkheden:

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

En, in .babelrc, voeg toe:

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

---

Antwoord 4, autoriteit 15%

Bijwerken

Het werkt als u het doel instelt op Chrome. Maar het werkt mogelijk niet voor andere doelen, raadpleeg: https://github. com/babel/babel-preset-env/issues/112

Dus dit antwoord is NIEThelemaal juist voor de oorspronkelijke vraag. Ik zal het hier bewaren als verwijzing naar babel-preset-env.

Een eenvoudige oplossing is om import 'babel-polyfill'toe te voegen aan het begin van je code.

Als u webpack gebruikt, is een snelle oplossing om babel-polyfilltoe te voegen, zoals hieronder weergegeven:

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

Ik geloof dat ik de nieuwste best practice heb gevonden.

Bekijk dit project: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Gebruik het volgende als je babyconfiguratie:

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

Dan zou je app goed moeten zijn in de laatste twee versies van de Chrome-browser.

Je kunt ook Nodeinstellen als doelen of de lijst met browsers verfijnen volgens https://github.com/ai/browserslist

Vertel me wat, vertel me niet hoe.

Ik hou echt van de filosofie van babel-preset-env: vertel me welke omgeving je wilt ondersteunen, vertel me NIET hoe je ze moet ondersteunen. Het is het mooie van declaratief programmeren.

Ik heb asyncawaitgetest en ze werken WEL. Ik weet niet hoe ze werken en ik wil het ook niet weten. Ik wil in plaats daarvan mijn tijd besteden aan mijn eigen code en mijn bedrijfslogica. Dankzij babel-preset-envbevrijdt het me van de Babel-configuratiehel.

---

Antwoord 5, autoriteit 10%

Update: het Babel 7-berichtheeft ook een meer diepgaand antwoord.

---

Babel 7.4.0 of hoger (core-js 2 / 3)

Vanaf Babel 7.4.0, @babel/polyfillisverouderd.

Over het algemeen zijn er twee manieren om polyfills/regenerator te installeren: via global namespace (optie 1) of als ponyfill (optie 2, zonder globale vervuiling).

---

Optie 1: @babel/preset-env

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

gebruikt automatisch regenerator-runtimeen core-jsvolgens uw doel. U hoeft niets handmatig te importeren. Vergeet niet runtime-afhankelijkheden te installeren:

npm i --save regenerator-runtime core-js

Als alternatief, stel useBuiltIns: "entry"in en importeer het handmatig:

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

---

Optie 2: @babel/transform-runtimemet @babel/runtime

Dit alternatief heeft geen wereldwijde vervuiling en is geschikt voor bibliotheken.

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

Installeer het:

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

Als corejspolyfill wordt gebruikt, vervangt u @babel/runtimedoor @babel/runtime-corejs2(voor "corejs": 2) of @babel/runtime-corejs3(voor "corejs": 3).

---

Antwoord 6, autoriteit 7%

Als u niet alle modules nodig heeft die babel-polyfillbiedt, kunt u ook gewoon babel-regenerator-runtimespecificeren in uw webpack-configuratie:

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

Bij gebruik van webpack-dev-server met HMR, verminderde dit het aantal bestanden dat bij elke build moest worden gecompileerd aanzienlijk. Deze module is geïnstalleerd als onderdeel van babel-polyfilldus als je die al hebt, zit je goed, anders kun je hem apart installeren met npm i -D babel-regenerator-runtime.

---

Antwoord 7, autoriteit 6%

Mijn eenvoudige oplossing:

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

---

Antwoord 8, autoriteit 4%

Deze fout wordt veroorzaakt wanneer async/await-functies worden gebruikt zonder de juiste Babel-plug-ins. Vanaf maart 2020 zou het volgende alles moeten zijn wat u hoeft te doen. (@babel/polyfillen veel van de geaccepteerde oplossingen zijn verouderd in Babel. Lees meer in de Babel-documenten.)

Typ in de opdrachtregel:

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

Voeg deze plug-in @babel/plugin-transform-runtimetoe aan uw @babel/plugin-transform-runtime-bestand. Opmerking: het onderstaande voorbeeld bevat de andere voorinstellingen en plug-ins die ik heb voor een klein React/Node/Express-project waaraan ik onlangs heb gewerkt:

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

---

Antwoord 9, autoriteit 3%

babel-regenerator-runtimeis nu verouderd, in plaats daarvan zou men regenerator-runtimemoeten gebruiken.

Om de runtime generator te gebruiken met webpacken babelv7:

installeer regenerator-runtime:

npm i -D regenerator-runtime

En voeg dan toe binnen de webpack-configuratie:

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

---

Antwoord 10, autoriteit 2%

Update uw .babelrc-bestand volgens de volgende voorbeelden, het zal werken.

Als je een @babel/preset-envpakket gebruikt

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

---

Antwoord 11, autoriteit 2%

Vanaf oktober 2019 werkte dit voor mij:

Voeg dit toe aan de voorinstelling.

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

Installeer vervolgens regenerator-runtime met npm.

npm i regenerator-runtime

En dan in je hoofdbestand gebruik: (deze import wordt maar één keer gebruikt)

import "regenerator-runtime/runtime";

Hiermee kunt u asyncawaitsin uw bestand gebruiken en de regenerator error

verwijderen

---

Antwoord 12, autoriteit 2%

Pas op voor gehesen functies

Ik had zowel mijn ‘polyfill-import’ als mijn ‘async-functie’ in hetzelfde bestand, maar ik gebruikte de functiesyntaxis die het boven de polyfill hijsen, wat me de ReferenceError: regeneratorRuntime is not definedfout.

Wijzig deze code

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

naar dit

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

om te voorkomen dat het boven de polyfill-import wordt gehesen.

---

Antwoord 13, autoriteit 2%

Als u babel-preset-stage-2gebruikt, hoeft u het script alleen maar te starten met --require babel-polyfill.

In mijn geval werd deze fout veroorzaakt door Mocha-tests.

Hierna is het probleem opgelost

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

---

Antwoord 14

Je krijgt een foutmelding omdat async/wait generators gebruiken, wat een ES2016-functie is, niet ES2015. Een manier om dit op te lossen is door de babel-preset voor ES2016 te installeren (npm install --save babel-preset-es2016) en te compileren naar ES2016 in plaats van ES2015:

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

Zoals de andere antwoorden vermelden, kunt u ook polyfillsgebruiken (zorg er echter voor dat u laad eerst de polyfillvoordat andere code wordt uitgevoerd). Als u niet alle polyfill-afhankelijkheden wilt opnemen, kunt u ook de babel-regenerator-runtimeof de babel-plugin-transform-runtime.

---

Antwoord 15

Ik kreeg deze foutmelding nadat ik mijn project in een typoscript-project had omgezet. Voor zover ik begrijp, komt het probleem voort uit async/wacht niet herkend.

Voor mij is de fout verholpen door twee dingen aan mijn setup toe te voegen:

1. Zoals hierboven vaak vermeld, moest ik babel-polyfill toevoegen aan mijn webpack-invoerarray:

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

2. Ik moest mijn .babelrc updaten om de compilatie van async/wait in generators mogelijk te maken:

   {
    "voorinstellingen": ["es2015"],
    "plug-ins": ["transform-async-naar-generator"]
   }

DevDependencies:

Ik moest ook een paar dingen in mijn devDependencies in mijn package.json-bestand installeren. Ik miste namelijk de babel-plugin-transform-async-to-generator, babel-polyfill en de 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"
 }

Volledige code kern:

Ik heb de code gekregen van een erg behulpzame en beknopte GitHub-gist die je hierkunt vinden.

---

Antwoord 16

Ik had dit probleem in Chrome. Vergelijkbaar met het antwoord van RienNeVaPlu, dit loste het voor mij op:

npm install --save-dev regenerator-runtime

Vervolgens in mijn code:

import 'regenerator-runtime/runtime';

Blij de extra 200 kB van babel-polyfillte vermijden.

---

Antwoord 17

Ik heb deze fout verholpen door babel-polyfill te installeren

npm install babel-polyfill --save

vervolgens heb ik het geïmporteerd in mijn app-toegangspunt

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

voor het testen heb ik –require babel-polyfill in mijn testscript opgenomen

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

---

Antwoord 18

Nieuw antwoord Waarom volg je mijn antwoord?

Ans:Omdat ik je een antwoord ga geven met de nieuwste updateversie npm project .

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"

Als uw Gebruik deze versie of meer UP-versie van Npm en alle andere …
DUS hoef je alleen maar te veranderen:

webpack.config.js

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

Na het wijzigen van webpack.config.jsbestanden Voeg deze regel toe bovenaan uw code.

import "babel-polyfill";

Controleer nu of alles in orde is. Referentie-LINK

Ook @BrunoLM bedankt voor zijn aardige antwoord.

---

Antwoord 19

De gerichte browsers die ik moet ondersteunen, ondersteunen al async/wait, maar bij het schrijven van mokka-tests krijg ik zonder de juiste instelling nog steeds deze fout.

De meeste artikelen die ik heb gegoogled zijn verouderd, inclusief het geaccepteerde antwoord en de meest gestemde antwoorden hier, dat wil zeggen dat je geen polyfill, babel-regenerator-runtimenodig hebt, babel-plugin-transform-runtime. enz. als uw doelbrowser(s) al async/wait ondersteunen(natuurlijk, zo niet, dan heeft u polyfill nodig)

Ik wil webpackook niet gebruiken.

Tyler Longs antwoord is eigenlijk op de goede weg aangezien hij babel-preset-envvoorstelde (maar ik heb het eerst weggelaten omdat hij in het begin polifill noemde). Ik kreeg nog steeds de ReferenceError: regeneratorRuntime is not definedin het begin, toen realiseerde ik me dat dit kwam omdat ik het doel niet had ingesteld. Nadat ik het doel voor het knooppunt heb ingesteld, repareer ik de regeneratorRuntime-fout:

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

---

Antwoord 20

1 – Installeer babel-plugin-transform-async-to-module-methode,
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 – Voeg uw js babel polyfill toe:

import 'babel-polyfill';

3 – Voeg een plug-in toe aan uw .babelrc:

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

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

---

Antwoord 21

Aan babel7-gebruikers en ParcelJS >= 1.10.0 gebruikers

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

.babelrc

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

overgenomen van https://github.com/parcel-bundler/parcel/issues/ 1762

---

Antwoord 22

Ik had een configuratie
met webpackmet presets: ['es2015', 'stage-0']
en mokkadie tests uitvoerde die waren samengesteld door webpack.

Om mijn async/awaitin tests te laten werken, hoefde ik alleen maar mokka te gebruiken met de optie --require babel-polyfill:

mocha --require babel-polyfill

---

Antwoord 23

Er zijn daar zoveel antwoorden, ik zal mijn antwoord ter referentie plaatsen.
Ik gebruik webpack en reageer, hier is mijn oplossing zonder het .babelrc-bestand

Ik werk hieraan in augustus 2020

Installeer react en babe

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom @babel/plugin-transform-runtime --save-dev

Vervolgens in mijn webpack.config.js

// other stuff
module.exports = {
// other stuff
   module: {
   rules: [
   {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env',"@babel/preset-react"],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
        //npm install --save-dev @babel/plugin-transform-runtime
          }
        }
      },
    ],
  },
};

Ik weet gewoon niet waarom ik het async-pakket voorlopig niet hoef te installeren

---

Antwoord 24

Ik krijg deze foutmelding bij het gebruik van gulp met rollup toen ik ES6-generatoren probeerde te gebruiken:

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

Misschien was de oplossing het opnemen van babel-polyfillals prieelcomponent:

bower install babel-polyfill --save

en voeg het toe als afhankelijkheid in index.html:

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

---

Antwoord 25

Voor mensen die de babel-polyfillversie 7^ willen gebruiken, doe dit met webpackver3^.

Npm installeer de module npm i -D @babel/polyfill

Doe dit vervolgens in uw webpack-bestand in uw entry-punt

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

---

Antwoord 26

Mijn werkende babel 7standaardtekst voor reageren met regeneratorlooptijd:

.babelrc

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

pakket.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";
....

---

Antwoord 27

Ik gebruik een React- en Django-project en heb het werkend gekregen door regenerator-runtimete gebruiken. Je zou dit moeten doen omdat @babel/polyfillde grootte van je app meer vergroot en ook verouderd. Ik heb ook aflevering 1 van deze tutorialgevolgd & 2 om de structuurvan mijn project te maken.

*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'));
...

---

Antwoord 28

voor toekomstig gebruik:

Vanaf Babel versie 7.0.0-beta.55 zijn de voorinstellingen voor het podium verwijderd

verwijs blog https://babeljs.io/blog /2018/07/27/removing-babels-stage-presets

async wait kan nog steeds worden gebruikt door

https://babeljs.io/docs /en/babel-plugin-transform-async-to-generator#usage

installatie

npm install --save-dev @babel/plugin-transform-async-to-generator

gebruik in .babelrc

{ 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

en het gebruik van babel polyfill https://babeljs.io/docs/en/babel-polyfill

installatie

npm install --save @babel/polyfill

webpack.config.js

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

---

Antwoord 29

De eenvoudigste manier om dit ‘regeneratorRuntime not defined issue’ in je console op te lossen:

U hoeft geen onnodige plug-ins te installeren. Voeg gewoon toe:

<script src="https://unpkg.com/[email protected]/runtime.js"></script>

binnenkant van de body in je index.html.
Nu moet regeneratorRuntime worden gedefinieerd zodra je babel hebt uitgevoerd en nu moeten je async/wait-functies met succes worden gecompileerd in ES2015

---

Antwoord 30

Installeer gewoon regenerator-runtime
met onderstaand commando

npm i regenerator-runtime

voeg onderstaande regel toe aan het opstartbestand voordat u het serverbestand nodig heeft

require("regenerator-runtime/runtime");

Tot nu toe werkt dit voor mij