ノードバックエンドおよびリアクションフロントエンドであるアプリケーションがあります。
ノードアプリケーションをビルド/実行しようとすると、次のエラーが表示されます。
ノード:v10.13.0
エラー:
dist/index.js:314 regeneratorRuntime.mark(function _callee(productId){^
ReferenceError: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
"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"
}
回答の更新:
Babel 7.4.0以降を使用している場合、@babel/polyfill
は 非推奨 になっています。代わりに、次を使用する必要があります。
import "core-js/stable";
import "regenerator-runtime/runtime";
糸を使用してこれらを追加します。
yarn add core-js
yarn add regenerator-runtime
元の答え:
私はちょうどこの問題に遭遇し、次の解決策に出くわしました:
Package.jsonには、依存関係として@babel/polyfill
がありました。ただし、index.js(メインのjsファイル)では、次の行を先頭に配置することを怠っていました。
import '@babel/polyfill'
インポートすると、すべてが正常に機能しました。
他の回答が示唆しているように、私はbabel-runtimeをインストールする必要はありませんでした。
ここで非常に良い答え (元々Babel6の質問に投稿されました)があり、これをYarnに翻訳します。基本的に、Babelランタイム(dev依存関係としてではなく)とプラグインtransform-runtimeが必要です。
yarn add @babel/runtime
yarn add -D @babel/plugin-transform-runtime
そして、.babelrcに以下を追加します。
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}
regeneratorRuntimeが必要です。
この2つのパッケージをインストールします-babel-plugin-transform-regeneratorおよびbabel-polyfill
.babelrc
を介して次のBabel設定を追加します
{
"plugins": ["transform-regenerator"]
}