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

【babel】「ReferenceError: regeneratorRuntime is not defined」エラーが発生した時の対処法

先日に引き続き、今回も Cordova + React で開発しているプロジェクトで npm run build を実行した時に発生したエラーの対処法についてです。
前回のエラーは、@babel/preset-react ライブラリの追加と、.babelrc の内容を変更したらビルドが通りましたが、今回のエラーは、実機でプロジェクトを実行した時に発生しました。
こう言った、ビルドが通るのに実行時に落ちるエラーは苦手なんですよね…。

 

さて、今回のエラーですが、こちらの記事を参考にさせていただきました。

babelでasyncを使おうとしたらregeneratorRuntime is not definedが出た – tom-256.log
https://mzqvis6akmakplpmcjx3.hatenablog.com/entry/2018/02/07/161051

こちらによると、今回のエラーも .babelrc の内容を修正すれば直るとのことでした。
ちなみに今回のエラーの原因は、await-aysnc を使った非同期処理を行っているためだそうです。

修正前がこちら。

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ]
}

修正後がこちらです。

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

が、私の環境では、他にも設定している値がありましたので、最終的に下記のようになりました。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      },
    ],
    "@babel/preset-react",
  ]
}

この内容で、再び npm run build を実行し、実機でアプリを起動したところ、問題なく動作することが確認できました!
私の環境では、.babelrcpresets@babel/preset-env@babel/preset-react の両方が含まれている必要があったのですが、いくつか見た参考サイトだと @babel/preset-env のみの場合の書き方しか載っていなかったので、自分の環境にあった記述に直すのが少しややこしかったです。
最初は書き方を勘違いした状態で修正してしまい、今まで成功していたビルドに失敗するようになってしまったりもしました。
が、何とか無事に動作してよかったです。

 

以上、babel で「ReferenceError: regeneratorRuntime is not defined」エラーが発生する時の対処法についてでした。
ご参考になれば幸いです。

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