浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

  • この記事いいね! (0)