web-dev-qa-db-fra.com

Babel - regénérateurRuntime n'est pas défini, lors de l'utilisation du plugin transform-async-to-generator

Je ne suis pas en mesure de configurer correctement babel pour l'utilisation de async/wait.

J'utilise babel 7 et webpack 4.

Je ne veux pas utiliser babel-polyfill si possible!

Mon fichier babelrc:

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-async-to-generator"
    ]
}

Code:

async function init() {
  const loaderData = await initLoader();
  initCmp(loaderData)
    .then(initApi(loaderData.key))
    .catch();
}
init();

Et erreur:

refactor.main.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (refactor.main.js:18)
    at eval (refactor.main.js:47)
    at Object../client/refactor.main.js (cmp.bundle.js:312)
    at __webpack_require__ (cmp.bundle.js:62)
    at eval (main.js:6)
    at Object../client/main.js (cmp.bundle.js:300)
    at __webpack_require__ (cmp.bundle.js:62)
    at cmp.bundle.js:179
    at cmp.bundle.js:182
javascriptwebpackasync-awaitbabeljsbabel
8
dendog

La dernière documentation ici est assez claire: https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

Ce qui a fonctionné pour moi, c'est d'installer les deux packages pour la construction et pour l'exécution (le script final pour le navigateur):

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

npm install --save @babel/runtime

Dans le tableau de plugins de ma configuration de webpack, je viens d'ajouter "@ babel/plugin-transform-runtime" sans aucune option. (Veuillez également consulter la documentation liée ci-dessus, car certaines options (que vous pourriez trouver dans des didacticiels ou des réponses plus anciens) ont été supprimées.)

plugins: [
'@babel/plugin-transform-runtime'
]

Je peux maintenant utiliser des fonctions asynchrones sans erreurs, et cela n'ajoute pas beaucoup de code dans la version de production.

26
makkabi

Vous avez également besoin du transform-runtime plugin, donc votre .babelrc devrait être prêt:

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-runtime",
      "transform-async-to-generator"
    ]
}

Notez que vous devrez également npm install --save-dev transform-runtime

2
goofballLogic