React：引用错误：regeneratorRuntime未定义。

Question

我正在尝试在我的React应用程序中使用async和await。

   onSubmit = async (model) => {
        await this.setState({ data: model });
    }

在添加上述代码后，我在浏览器控制台中遇到了一个错误。

ReferenceError: regeneratorRuntime未定义

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ],
    "sourceMaps": "inline"

}

webpack.config.js

const path = require("path");
const WebpackShellPlugin = require("webpack-shell-plugin");
const nodeExternals = require("webpack-node-externals");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = [
    {
    Server config removed

 },

    {
        entry: {
            app1: './src/public/app1/index.js',
            app2: './src/public/app2/index.js',
            app3: './src/public/app3/index.js',
        },
        devtool: "source-map",
        output: {
            path: __dirname + '/dist/public/',
            publicPath: '/',
            filename: '[name]/bundle.js',
            devtoolLineToLine: true,
            sourceMapFilename: "[name]/bundle.js.map",

        },
        module: {
            rules: [
                {
                    test: /(\.css|.scss)$/,
                    use: [{
                        loader: "style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader" // translates CSS into CommonJS
                    }, {
                        loader: "sass-loader" // compiles Sass to CSS
                    }]
                },
                {
                    test: /\.(jsx|js)?$/,
                    use: [{
                        loader: "babel-loader",
                        // options: {
                        //     cacheDirectory: true,
                        //     presets: ['react', 'es2015'] // Transpiles JSX and ES6
                        // }
                    }]
                }
            ],

        },
        "plugins": [
            new CopyWebpackPlugin([
                {
                    from: 'src/public/app1/index.html',
                    to: 'app1'
                },
                {
                    from: 'src/public/app2/index.html',
                    to: 'app2'
                },
                {
                    from: 'src/public/app3/index.html',
                    to: 'app3'
                },
            ]),

        ]

    }
];

我已经添加了我的babelrc和webpack配置，请告诉我是否缺少任何会导致此错误在我的浏览器控制台中出现的内容。

- Kay

Answer 1

在使用async/await的组件中导入regeneratorRuntime：

import regeneratorRuntime from "regenerator-runtime";

***更新的答案***（可能不要使用上面的）

导入babel和@babel/plugin-transform-runtime插件:

package.json

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
  },

.babelrc

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

- StefanBob

---

我在尝试使用 async/await 时遇到了 reactjs.net 的问题，然后这个方法解决了它。 - Luther

这可能解决问题，但会导致“error 'regeneratorRuntime' is defined but never used” lint警告。也许可以将其安装为dev依赖项？ - DeBraid

@DeBraid 你说得对。我已经更新了答案，谢谢。 - StefanBob

经过长时间的搜索，谢谢！这个方法完美地解决了问题。还有另一种方法，即js "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ]但我认为它更适用于node.js，但在客户端也可以使用... - CoderOO7

Answer 2

您没有包含您的package.json文件，因此不太清楚您缺少什么。

假设您在package.json文件中有@babel/polyfill作为依赖项，那么您是否没有指定：

在您的React文件（例如index.js）中导入'@babel/polyfill'？

- kojow7

Answer 3

对我来说，从create-react-app添加polyfills是有效的。

yarn add --dev react-app-polyfill

然后将以下行添加到webpack.config.js中。

entry: {
  app: [
    'react-app-polyfill/ie9', // Only if you want to support IE 9
    'react-app-polyfill/stable',
    './src/index.jsx',
  ],
},

在react-app-polyfill GitHub页面上查看更多示例。

- Rafal Enden