[英]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.