先日から開発を始めた Electron アプリに、API との通信処理で async/await を使う用記述したら「Uncaught ReferenceError: regeneratorRuntime is not defined」というエラーが発生したので、その対処法についてです。
最初エラーメッセージを見た時は、「regeneratorRuntime が定義されていない?そもそも呼んでないが?」となりました。
参考にさせていただいた記事はこちら。
Webpack + Babel で async/await 使ったら「regeneratorRuntime is not defined」エラー – キリウ君が読まないノート
https://note.kiriukun.com/entry/20200704-regeneratorRuntime-is-not-defined
まず、必要なライブラリをインストールします。
npm install --save @babel/runtime npm install --save-dev @babel/plugin-transform-runtime
そうしたら、webpack.config.js を修正します。
修正する箇所は下記のとおりです。
const webpack = require('webpack');
module.exports = {
......
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ['@babel/plugin-transform-runtime'], // <- この行を追加
},
}
]
}
]
},
......
};
ちょっと長いサンプルコードですが、実際には 15 行目の 1 行を追加するだけです。
こちらを追加後、Electron のアプリをビルドし、実行したところ、エラーが発生しなくなりました!
以上、Babel と Webpack を導入していた Electron アプリで「Uncaught ReferenceError: regeneratorRuntime is not defined」が発生した時の対処方法でした。
ご参考になれば幸いです。