【Babel&Webpack】「Uncaught ReferenceError: regeneratorRuntime is not defined」エラーの対処法

  • 2021年7月9日
  • 2024年2月21日
  • Electron

先日から開発を始めた 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」が発生した時の対処方法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG