logo标签列表

Babel 6中regeneratorRuntime未定义

javascriptnode.jsbabeljs
827

我正在尝试在Babel 6上从头开始使用async/await，但是我遇到了regeneratorRuntime未定义的问题。

.babelrc 文件

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

package.json文件

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

.js 文件

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

不使用async/await正常运行。有什么想法我做错了吗？

3
babel-polyfill 是您所需要的。 - Ronnie Royston
babel-polyfill已于7.4版本被弃用；这篇更新的Stack Overflow帖子描述了迁移过程。 - JWCS
对于使用较新版本的 Babel 和 Node 的人：https://dev59.com/Y6rka4cB1Zd3GeqPi8ZG#62254909 - Mon
babel预设环境并没有做它所声称的事情：https://github.com/babel/babel/issues/7619#issuecomment-375430112 - aderchox
48个回答
15

截至2019年10月，这对我有效：

将此添加到预设中。

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

然后使用npm安装regenerator-runtime。

npm i regenerator-runtime

然后在你的主文件中使用：（这个导入只使用一次）

import "regenerator-runtime/runtime";

这将使您能够在文件中使用 async await 并消除 regenerator 错误

不设置 useBuiltIns 的值将默认为 false。这样做不会自动导入任何依赖于目标环境的 polyfill，这有点削弱了 "@babel/preset-env" 的作用。这里还有一位 Babel 开发者的相关评论。 - bela53
14

小心hoisted函数

我在同一个文件中使用了'polyfill import'和'async function'，但是我使用的函数语法使其在polyfill之上被提升，这会导致出现ReferenceError: regeneratorRuntime未定义错误。

更改此代码

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

到这里

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

为了防止它被提升到Polyfill导入之上。

6
我快要疯了，而你拯救了我，我爱你。 - John R Perry
13

我在Chrome浏览器中遇到了这个问题。与RienNeVaPlu͢s的答案类似，这对我解决了这个问题：

npm install --save-dev regenerator-runtime

然后在我的代码中：

import 'regenerator-runtime/runtime';

很高兴可以避免使用 babel-polyfill 带来的额外 200 kB。

这个答案被低估了，它是最简单的解决方案。然而，在 dev 依赖中安装它将不起作用，你需要在依赖中安装它。我的使用情况是部署到 Firebase 函数 Node.js 14。 - Acid Coder
13
为什么这个能解决问题？ - jjmerelo
1
@jjmerelo 我只知道我在链接的 GitHub 问题中所读到的内容。在这个变化之前，我尝试了很多其他答案，但在我的设置中，这是唯一解决它的方法！ - k1eran
12
如果使用babel-preset-stage-2，只需在脚本前加上--require babel-polyfill。
在我的情况下，这个错误是由Mocha测试引起的。
按照以下方式修复问题： mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
10

将我的项目转换为TypeScript项目后，我开始遇到这个错误。据我所知，问题出在async/await未被识别。

对我来说，通过添加两个东西来解决了这个问题：

  1. 如上多次提到的，我需要将babel-polyfill添加到我的webpack入口数组中：

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

  2. 我需要更新我的.babelrc以允许将async/await编译成generators：

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

DevDependencies:

我还需要在package.json文件的devDependencies中安装一些东西。即，我缺少babel-plugin-transform-async-to-generator、babel-polyfill和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"
 }

完整代码清单：

我从这里可以找到非常有帮助和简洁的GitHub清单中获取了代码：这里。

3
最好使用预设的 env 而不是 es2015。因为 env 已经包含了 es2015。 - Neurotransmitter
10

您之所以遇到错误，是因为async/await使用生成器(generator)，这是ES2016的功能，而不是ES2015。修复的一种方法是安装ES2016的babel预设(npm install --save babel-preset-es2016)并编译成ES2016而不是ES2015:

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

如其他答案所述，您也可以使用polyfills（但请确保在任何其他代码运行之前先加载polyfill。）。或者，如果您不想包含所有的polyfill依赖项，您可以使用babel-regenerator-runtime 或babel-plugin-transform-runtime。

9
我通过安装babel-polyfill解决了这个错误。
npm install babel-polyfill --save

然后我在我的应用程序入口导入了它。
import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

为了测试，我在我的测试脚本中包含了--require babel-polyfill。

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

这里有很多答案，我将发布我的答案以供参考。 我使用webpack和react，以下是我的解决方案不需要.babelrc文件

我在2020年8月进行了这项工作

安装React和Babel

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

然后在我的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
          }
        }
      },
    ],
  },

};

我只是不知道为什么暂时不需要安装async包

6
我需要支持的浏览器已经支持async/await，但在编写mocha测试时，如果没有正确的设置，仍然会出现错误。我搜索到的大多数文章都已过时，包括这里被接受的答案和高票答案，即如果您的目标浏览器已经支持async/await（当然，如果不支持，则需要polyfill），则不需要使用polyfill、babel-regenerator-runtime、babel-plugin-transform-runtime等。我也不想使用webpack。Tyler Long的回答实际上是正确的，因为他建议使用babel-preset-env（但我一开始忽略了他在开头提到的polifill）。我第一次仍然遇到了ReferenceError: regeneratorRuntime未定义的问题，后来我意识到这是因为我没有设置目标。设置了node的目标后，我解决了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
      }]
    ]
  }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接