まとめ
@babel/preset-env の targets 設定を見直して、Babel のターゲット指定を適切にしてやると無駄なPolyfillも使わずエラーもなくなる。
内容
webpack@4.43.0, babel-loader@8.1.0 な環境。対象はフロント（ブラウザ）用。
エラーメッセージで検索すると先例が色々とあるので、対処そのものは難しくないと思います。
async/await を bable でトランスパイルしたはいいが、必要な regeneratorRuntime が無いのというのがエラー要因なので、
- 必要な polyfill を追加する
- トランスパイル先のターゲットを要件に合わせて設定する
- @babel/runtime を入れる
あたりが対処方法になるかと思います。
自分の場合はモダンブラウザがターゲットで IE11 は対象外なので、polyfill は放り投げてトランスパイル先をちゃんと指定してやる方向で webpack.config.js の babel-loader の設定に targets を次のように指定してやりました。
loader: 'babel-loader',
options: {
presets: [ ['@babel/preset-env',
{
"targets": {
"browsers": "since 2019"
}
} ] ]
}
@babel/preset-env · Babel targets.browsers
@babel/preset-env のデフォルトだと次の通りの指定になっているので IE11 もターゲットに含まれているのですが、
> 0.5%, last 2 versions, Firefox ESR, not dead
since 2019 をターゲットにしてやると文字通り 2019 年以降リリースのブラウザのみがターゲットになるので async/await はトランスパイルされず、そのまま使われるのでエラーも無くなり無用なpolyfillもいらずで丸く収まります。
node.js にしろブラウザにしろ、最近のものは async/await には対応しているので、Babel 使うときはターゲットをちゃんと指定しましょうというオチでした。
