Javascript Babel 7 - ReferenceError: regeneratorRuntime 未定义

Question

提问by Kay

I have an application that is a node backend and a react frontend.

我有一个应用程序，它是一个节点后端和一个反应前端。

I get the following error when i try to build/run my node application.

当我尝试构建/运行我的节点应用程序时出现以下错误。

Node: v10.13.0

节点： v10.13.0

Error:

错误：

dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { ^
ReferenceError: regeneratorRuntime is not defined

dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { ^
参考错误：未定义 regeneratorRuntime

.babelrc

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

webpack.config.js

{
        mode: "development",
        entry: "./src/index.js",
        target: "node",
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
        stats: {
            colors: true
        },
        devtool: "source-map",

        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "index.js",
            sourceMapFilename: "index.js.map"
        },
        module: {
            rules: [
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                }
            ],
        },
        node: {
            __dirname: false,
            __filename: false,
        },

        "plugins": [
            new CleanWebpackPlugin(),
            new WebpackShellPlugin({
                onBuildStart: [],
                onBuildEnd: ["nodemon dist/index.js"]
            }),

        ]

    },

package.json

包.json

 "dependencies": {
    "connect": "^3.6.6",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "hellojs": "^1.17.1",
    "i18n-iso-countries": "^3.7.8",
    "morgan": "^1.9.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "request": "^2.88.0",
    "request-promise-native": "^1.0.5",
    "serve-static": "^1.13.2",
    "vhost": "^3.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-config-google": "^0.10.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.11.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  }

Answer 1

回答by kojow7

Update Answer:

更新答案：

If you are using Babel 7.4.0 or newer, then @babel/polyfillhas been deprecated. Instead, you will want to use the following in your main js file (likely index.js or similar):

如果您使用的是 Babel 7.4.0 或更新版本，@babel/polyfill则已弃用。相反，您需要在主 js 文件（可能是 index.js 或类似文件）中使用以下内容：

import "core-js/stable";
import "regenerator-runtime/runtime";

Add these using yarn:

使用纱线添加这些：

yarn add core-js
yarn add regenerator-runtime

Original Answer:

原答案：

I just encountered this problem and came across the following solution:

我刚刚遇到了这个问题，并遇到了以下解决方案：

In package.json I had @babel/polyfillas a dependency. However, in my index.js (My main js file) I had neglected to place the following line at the the top:

在 package.json 我有@babel/polyfill一个依赖项。但是，在我的 index.js（我的主 js 文件）中，我忽略了将以下行放在顶部：

import '@babel/polyfill'

Once I imported it, everything worked fine.

一旦我导入它，一切正常。

I did not need to install babel-runtime as other answers are suggesting.

我不需要像其他答案所暗示的那样安装 babel-runtime。

Answer 2

回答by Cyril Duchon-Doris

There is already a very good answer here(originally posted on the Babel6 question) which I will just translate to Yarn. Basically you need babel runtime (NOT as a dev dependency) and the plugin transform-runtime

这里已经有一个很好的答案（最初发布在 Babel6 问题上），我将其翻译为 Yarn。基本上你需要 babel 运行时（不是作为开发依赖）和插件转换运行时

yarn add @babel/runtime 
yarn add -D @babel/plugin-transform-runtime

And, in .babelrc, add:

并且，在 .babelrc 中，添加：

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

Answer 3

回答by Alex Jolig

I had this error in my reactproject with webpack 4and this was preventing the whole project to get rendered.

我在我的react项目中遇到了这个错误，webpack 4这阻止了整个项目的渲染。

This is how I solved it:

我是这样解决的：

Install plugin-transform-runtime:

安装plugin-transform-runtime：

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

Add plugin-transform-runtimeto the plugin's list in the .babelrcfile:

添加plugin-transform-runtime到.babelrc文件中的插件列表：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  
}

Answer 4

回答by ford04

Babel 7.4.0 and later

Babel 7.4.0 及更高版本

Option 1: @babel/preset-env

选项 1：@babel/preset-env

When to use:? for applications ? global scope pollution neglectable/desired ? smallest bundle size

何时使用：? 对于应用程序？全球范围的污染可忽略/期望 ? 最小束尺寸

"presets": [
  [
    "@babel/preset-env",
    {
      "useBuiltIns": "usage", // alternative mode: "entry"
      "corejs": 3, // default would be 2
      "targets": "> 0.25%, not dead" 
      // set your own target environment here (see Browserslist)
    }
  ]
]

安装运行时依赖项：

npm i regenerator-runtime core-js
// regenerator-runtime: transform (async) generators and `async`/`await`
// core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-envselectivelyincludes polyfills for the targets, specified by a Browserslistquery. There are two modes - try usagefirst (more convenient), else entry(more flexible and robust):

@babel/preset-env有选择地包含targets由Browserslist查询指定的 , 的polyfill。有两种模式 -usage先尝试（更方便），否则entry（更灵活和健壮）：

useBuiltIns 'usage': no need to importanything manually. All polyfills are added automatically based on their code usagein a file.

useBuiltIns 'entry': Add these importentries once(!) in your app - akin to @babel/polyfill:

import "regenerator-runtime/runtime";
import "core-js/stable"; // or a more selective import such as "core-js/es/array"

useBuiltIns 'usage'：无需import手动操作。所有 polyfill 都会根据它们在文件中的代码使用情况自动添加。

useBuiltIns 'entry'：在您的应用程序中添加这些import条目一次(!) - 类似于@babel/polyfill：

import "regenerator-runtime/runtime";
import "core-js/stable"; // or a more selective import such as "core-js/es/array"

Option 2: @babel/plugin-transform-runtime

选项 2：@babel/plugin-transform-runtime

When to use:? for libraries ? noglobal scope pollution ? includes allpolyfills (bigger bundle size)

何时使用：? 对于图书馆？没有全球范围的污染？包括所有polyfills（更大的包大小）

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

安装开发 and和运行时依赖项：

npm i --save-dev @babel/plugin-transform-runtime // only for build phase

npm i @babel/runtime // runtime babel helpers + just regenerator runtime
// OR (choose one!)
npm i @babel/runtime-corejs3 
// also contains other JS polyfills (not only regenerator runtime)
// depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

Release notes

发行说明

Breaking Change: @babel/polyfillis deprecated starting with Babel 7.4.0.
Legacy: If you can't switch to core-js@3, set corejsoption to 2(see migrations). Install @babel/runtime-corejs2in case of option 2 (@babel/plugin-transform-runtime).
In option 1, you potentially could add @babel/transform-runtime+ run-time only for Babel helpersto reduce bundle size a bit more, but that's more an advanced case (just to mention it).

重大变化：@babel/polyfill从Babel 7.4.0开始被弃用。
旧版：如果您无法切换到core-js@3，请将corejs选项设置为2（请参阅迁移）。@babel/runtime-corejs2在选项 2 ( @babel/plugin-transform-runtime) 的情况下安装。
在选项 1 中，您可能只为 Babel助手添加@babel/transform-runtime+ 运行时以进一步减少包大小，但这更像是一个高级案例（仅提一下）。

Answer 5

回答by DariusV

I just solved this error when I imported babel-polyfill directly into the file that shows the error, for example, the error says "ReferenceError: regeneratorRuntime is not defined at /dist/models/usersSchema.js", so I use this in my usersSchema.js file:

当我将 babel-polyfill 直接导入显示错误的文件时，我刚刚解决了这个错误，例如，错误说“ReferenceError: regeneratorRuntime is not defined at /dist/models/usersSchema.js”，所以我在我的usersSchema.js 文件：

require("babel-polyfill");

(you can use import "babel-polyfill";as well)

（你也可以使用import "babel-polyfill";）

Answer 6

回答by ksharifbd

You will need to have the regeneratorRuntime.

您将需要拥有regeneratorRuntime。

Install this two packages - babel-plugin-transform-regeneratorand babel-polyfill

安装这两个包 - babel-plugin-transform-regenerator和babel-polyfill

Add the following Babel configuration via .babelrc

通过添加以下 Babel 配置 .babelrc

{
  "plugins": ["transform-regenerator"]
}

Answer 7

回答by Abdelrahman Shoman

React.js Users

React.js 用户

If this issue faced you while using react (specifically while trying to use Async/Wait), then Valentino Gagliardiprovided a detailed approach on his blogregarding how to address this issue

如果您在使用 react 时遇到这个问题（特别是在尝试使用Async/Wait 时），那么Valentino Gagliardi在他的博客上提供了有关如何解决这个问题的详细方法

Javascript Babel 7 - ReferenceError: regeneratorRuntime 未定义

提问by Kay

回答by kojow7

回答by Cyril Duchon-Doris

回答by Alex Jolig

回答by ford04

Babel 7.4.0 and later

Babel 7.4.0 及更高版本

Option 1: @babel/preset-env

选项 1：@babel/preset-env

Option 2: @babel/plugin-transform-runtime

选项 2：@babel/plugin-transform-runtime

Release notes

发行说明

回答by DariusV

回答by ksharifbd

回答by Abdelrahman Shoman

相关推荐

最近更新

标签

Javascript Babel 7 - ReferenceError: regeneratorRuntime 未定义

提问by Kay

回答by kojow7

回答by Cyril Duchon-Doris

回答by Alex Jolig

回答by ford04

Babel 7.4.0 and later

Babel 7.4.0 及更高版本

Option 1: @babel/preset-env

选项 1：@babel/preset-env

Option 2: @babel/plugin-transform-runtime

选项 2：@babel/plugin-transform-runtime

Release notes

发行说明

回答by DariusV

回答by ksharifbd

回答by Abdelrahman Shoman

相关推荐

Javascript 违反以下内容安全政策指令

Javascript jQuery - 单击外部 div 后隐藏 div 菜单

Javascript 如何在 React 经典 `class` 组件中使用 React 钩子？

Javascript 如何在 AngularJS ui-grid 中自动调整列宽

相关推荐

最近更新

标签