【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」エラーが発生する時の対処法についてでした。
ご参考になれば幸いです。

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

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

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

CTR IMG