webpackで解決できなかった：Uncaught TypeError: Cannot set property 'wrap' of undefined

　ググったけど対策わからず。

コード

• github

過去

• DOMマッパーを作った
• webpack5でprivateキーワード#がエラーになった２
• webpackでasyncを使うとregeneratorRuntime未定義エラーになった

背景

　作ったDOMマッパーをwebpackしようとしたら今回のエラーに遭遇した。

Uncaught TypeError: Cannot set property 'wrap' of undefined

　原因はasyncを使ったことによるBabelのビルドエラーだと思う。それは@babel/plugin-transform-runtimeで解決したのだが、今回のエラーは解決できなかった。ググったが、わからず。

• https://stackoverflow.com/questions/64579253/unable-to-set-property-wrap-of-undefined-or-null-reference
• https://github.com/microsoft/monaco-editor-webpack-plugin/issues/64
• https://www.drupal.org/project/views_bootstrap/issues/3170937

追記１

　新しい構文をつかうなら@babel/runtime-corejs2が必要らしい。

• @babel/plugin-transform-runtime で Promise が変換されずハマった
• 公式 @babel/runtime , @babel/plugin-transform-runtime

$ npm i -D @babel/runtime-corejs2
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

　3があるんでそっち使えってか。最初からそう言えよ。

npm i -D @babel/runtime-corejs3

　はいまた違うエラーです。本当にありがとうございました。どんどんググラビリティ下がっていく。なんだよr()って。

Uncaught TypeError: r(...) is not a function
    at Object.591 (DomMapper.js:1)

追記２

　それっぽいプラグインみつけたので試してみる。

• 公式 @babel/transform-async-to-generator

npm i -D @babel/transform-async-to-generator

　ない。ないよ。念のため@babel/transform-async-to-module-methodもインストールを試みたが、同じく存在しない。おなじくbabel v7なのに、もう変わったのか？　ドキュメントも当てにならない。クソすぎてヤバイ。

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@babel%2ftransform-async-to-generator - Not found

　以下のように設定すればよかったらしいのだが。

    ["@babel/transform-async-to-generator", {
      "module": "bluebird",
      "method": "coroutine"
    }]

追記３

　yieldも使ってることを思い出した。ググったら``というプラグインがあるらしい。試したがエラーは解決せず。

npm i -D @babel/plugin-transform-regenerator

module.exports = {
  mode: "production",
  entry: "./src/DomMapper.js",
  output: {
    library: 'DomMapper',
    libraryExport: 'default',
    libraryTarget: 'umd',
    globalObject: 'this',
    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",
                // yieldを使えるようにする
                "@babel/plugin-transform-regenerator",
              ],
            },
          },
        ],
      },
    ],
  },
  // ES5(IE11等)向け
  target: ["web", "es5"],
};

Uncaught TypeError: Cannot set property 'wrap' of undefined

追記４

• https://qiita.com/riversun/items/63c5f08c8da604c5ec1a

npm i -D core-js@3

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", {
                    useBuiltIns: "usage",
                    corejs: 3,
                }]
              ],
              plugins: [
                // private # を使えるようにする
                "@babel/plugin-proposal-class-properties",
                "@babel/plugin-proposal-private-methods",
                // asyncを使えるようにする
                "@babel/plugin-transform-runtime",
                // yieldを使えるようにする
                "@babel/plugin-transform-regenerator",
              ],
            },
          },
        ],
      },
    ],
  },
  // ES5(IE11等)向け
  target: ["web", "es5"],
};

　また別のエラー。

Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 3196

追記５

　modules: 'umd'の設定を加えた。

• https://qiita.com/riversun/items/63c5f08c8da604c5ec1a
• https://qiita.com/soarflat/items/21b8955f992bf7d38581

                ["@babel/preset-env", {
                    useBuiltIns: "usage",
                    corejs: 3,
                    modules: 'umd',//commonjs,amd,umd,systemjs,auto
                }]

　また別のエラー。

Uncaught TypeError: n(...) is not a function

　もう追えない。

対策

　asyncは使わない。たぶんasyncかyieldが原因だと思うから。

　いやそれムリじゃね？　いまどきそれらを使わないコードとかクソでしょ。

　Babelは使わない。Webpack使わない。だってネイティブなら動くもの。あ、これしかないわ。えー。さんざっぱら手間暇かけさせられてそれ？　なんなの。やっぱnode.js, webpack, babel は嫌いだわ。

• 2021-01-27