jsのビルドで「Can't resolve 'regenerator-runtime/runtime'」が出た時の対策

「Module not found: Error: Can't resolve 'regenerator-runtime/runtime'」が出た

async/awaitを使っているコードをビルド（babelをかけたら）したら
以下のようなエラーとなる場合がある。

Module not found: Error: Can't resolve 'regenerator-runtime/runtime' in xxx

対策案その1 core-jsとregenerator-runtimeを導入する

Babel 7.4.0以降を使っているなら、

2つのnpmモジュールcore-jsとregenerator-runtimeをインストール

npm install core-js@3 regenerator-runtime

async/awaitを使っているソースコード(.js)でいまインストールしたモジュールをimportする

import "core-js/stable";
import "regenerator-runtime/runtime";
・・・以下略・・・

対策案その2　@babel/polyfill を導入する

@babel/polyfillをインストール

npm install --save-dev @babel/polyfill

async/awaitを使っているソースコード(.js)で import "@babel/polyfill" する

import "@babel/polyfill";
・・・以下略・・・

babel公式によると、@babel/polyfillは Babel 7.4.0で deprecatedとなっているので注意

対策案その3　対象ブラウザを変更する

＜変更前＞古いブラウザを対象にした@babel/preset-envの設定

※targetsに注目

webpack.config.js抜粋

{
 test: /\.js$/,
 exclude: /(node_modules|bower_components)/,
 use: [
  {
   loader: 'babel-loader',
   options: {
    presets: [
     [
      '@babel/preset-env',
      {
       'modules': 'false',//commonjs,amd,umd,systemjs,auto
       'useBuiltIns': 'usage',
       'targets': '> 0.25%, not dead',
       'corejs': 3
      }
     ]
    ]
   }
  }
 ],
}, 

＜変更後＞新しいブラウザを対象にした@babel/preset-envの設定

※targetsに注目

webpack.config.js抜粋

{
 test: /\.js$/,
 exclude: /(node_modules|bower_components)/,
 use: [
  {
   loader: 'babel-loader',
   options: {
    presets: [
     [
      '@babel/preset-env',
      {
       'modules': 'false',//commonjs,amd,umd,systemjs,auto
       'useBuiltIns': 'usage',
       "targets": {
        "browsers": [
         "last 1 Chrome version",
         "last 1 Firefox version",
         "last 1 Edge version",
         "last 1 Safari version",
         "last 1 Opera version"
        ]
       },
       'corejs': 3
      }
     ]
    ]
   }
  }
 ],
},

（対策その２のほうは、babelの目的から考えると、本末転倒かな。）