webpackでasyncを使うとregeneratorRuntime未定義エラーになった

　はぁ？ 　

背景

　webpackでビルドしたコードを実行すると、以下エラーが出た。

Uncaught ReferenceError: regeneratorRuntime is not defined

　regeneratorRuntimeってなんぞ？

ググった

• https://www.aizulab.com/blog/referenceerror-regeneratorruntime-is-not-defined/
• https://note.kiriukun.com/entry/20200704-regeneratorRuntime-is-not-defined

　asyncを使うと出るエラーらしい。以下をインストール＆設定すればいいようだ。

npm i @babel/runtime
npm i --save-dev @babel/plugin-transform-runtime

　まとめて入手する。

npm i -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/runtime @babel/plugin-transform-runtime

webpack.config.js

module.exports = {
  mode: "production",
  entry: "./src/DomMapper.js",
  output: {
    library: 'DomMapper',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this',
//    library: 'DomMapper',
//    libraryExport: 'default',
//    libraryTarget: 'var',
    filename: 'DomMapper.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                // ES2020 を ES5 に変換
                "@babel/preset-env",
              ],
              plugins: [
                // private # を使えるようにする
                "@babel/plugin-proposal-class-properties",
                "@babel/plugin-proposal-private-methods",
                // asyncを使えるようにする
                "@babel/plugin-transform-runtime",
              ],
            },
          },
        ],
      },
    ],
  },
  // ES5(IE11等)向け
  target: ["web", "es5"],
};

新たなエラーが出た

　たしかにさっきのエラーは消えた。が、新たなエラーが出た。

DomMapper.js:1 Uncaught TypeError: Cannot set property 'wrap' of undefined

所感

　いつ終わるんだろうね。もう嫌だ。

対象環境

• 2021-01-27
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux