[英]Uncaught ReferenceError: regeneratorRuntime is not defined in React
[英]React: ReferenceError: regeneratorRuntime is not defined
我正在尝试在我的 React 应用程序中使用 async 和 await。
onSubmit = async (model) => {
await this.setState({ data: model });
}
添加上述代码后,我的浏览器控制台出现错误。
参考错误:未定义 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 配置。 如果我遗漏了会导致此错误出现在我的浏览器控制台中的内容,请告诉我。
使用 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"]
}
你没有包含你的 package.json 文件,所以有点不清楚你缺少什么。
假设您在 package.json 文件中有@babel/polyfill
作为依赖项,您是否可能没有指定:
import '@babel/polyfill'
在你的 React 文件中(比如 index.js)?
从create-react-app
添加 polyfills 对我有用。
yarn add --dev react-app-polyfill
然后webpack.config.js
添加到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 页面上查看更多示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.