无法设置未定义或空引用的属性“包装”

Question

我正在为浏览器构建一个带有 webpack + babel 的包，将它定位到 ES5。当我尝试使用它时，出现错误Unable to set property 'wrap' of undefined or null reference。当我在不使用 babel 的情况下构建包时它正常工作，所以我使用的配置/插件可能有问题

webpack.config.js

module.exports = {
    entry: ['./index.js'],
    module: {
        rules: [{
            // Only run `.js` files through Babel
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [
                        [
                            '@babel/plugin-proposal-decorators',
                            {
                                legacy: true,
                            },
                        ],
                        '@babel/plugin-proposal-class-properties',
                        [
                            '@babel/plugin-transform-runtime',
                            {
                                regenerator: true,
                            },
                        ],
                    ],
                }
            }
        }]
    },
    resolve: {
        modules: ['./node_modules']
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: 'test.bundle.js',
        library: 'test',
    },
    node: {
        tls: "empty",
        fs: "empty",
        net: "empty"
    }
};

依赖：

...
"devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "acorn": "^8.0.4",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
...

堆栈跟踪

Uncaught TypeError: Cannot set property 'wrap' of undefined
    at test.bundle.js:6818
    at Module.<anonymous> (schemarama.bundle.js:7472)
    at Module.<anonymous> (schemarama.bundle.js:7492)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Object.<anonymous> (schemarama.bundle.js:237)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Module.<anonymous> (schemarama.bundle.js:6509)
    at Module.<anonymous> (schemarama.bundle.js:6758)
    at __webpack_require__ (schemarama.bundle.js:21)
    at Object.<anonymous> (schemarama.bundle.js:6496)

放置在导致错误的包中（最后一行）+ 包装定义

...
"devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "acorn": "^8.0.4",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
...

预先感谢您的任何帮助 ：）

Answer 1

显然这是一个相当过时的问题，但问题仍然存在。

我不知道为什么，但该错误源自插件“@babel/plugin-transform-runtime”

要解决该问题，您必须关闭助手：

[
  '@babel/plugin-transform-runtime',
    {
      helpers: false,
      regenerator: true
    }
]

它使用更多的空间来不启用助手，但在我找到可行的解决方案（或获得错误报告）之前，这是迄今为止解决问题的最佳方法。另一种方法是内联 polyfill 和运行时生成器：

import "regenerator-runtime/runtime"; // this is equivalent to @babel/plugin-transform-runtime
import "core-js/stable"; // if polyfills are also needed

您可以将它们放在应用程序/库的入口处，但它会使用更多内存，而对我来说，删除助手只增加了几 kB。