使用Babel和Webpack时出现“无法读取未定义的属性'helpers'”错误

Question

我正在尝试构建一个Safari扩展程序。由于浏览器中无法使用require或import，因此我正在尝试设置Webpack和Babel。我非常依赖于我发现的其他示例，但是没有成功。任何帮助都将不胜感激。

webpack.conf.js

const path = require('path')

module.exports = {
    target: 'web',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "ReduxDevTools.safariextension"),
        filename: 'index.js'
    },
    module: {
      rules: [
        {
          test: /src\/.+\.js$/,
          exclude: /(node_modules|ReduxDevTools\.safariextension)/,
          use: {
            loader: 'babel-loader',
            options: {
              "presets": [
                ["@babel/preset-env", {
                  "targets": {
                    "safari": 10
                  }
                }],
                "@babel/preset-stage-0"
              ],
              "plugins": [
                ["@babel/plugin-transform-runtime", {
                  "helpers": false,
                  "polyfill": false,
                  "regenerator": true,
                  "moduleName": "@babel/runtime"
                }]
              ]
            }
          }
        }
      ]
    }
}

package.json

"scripts": {
    "build": "./node_modules/.bin/webpack",
    "dev": "nodemon --watch ./src --exec yarn run build"
  },

目录

├── CertificateSigningRequest.certSigningRequest
├── ReduxDevTools.safariextension
│   ├── AppIcon.appiconset
│   │   ├── Contents.json
│   │   ├── logo-2-1024.png
│   │   ├── logo-2-128.png
│   │   ├── logo-2-16.png
│   │   ├── logo-2-256.png
│   │   ├── logo-2-32.png
│   │   ├── logo-2-512.png
│   │   └── logo-2-64.png
│   ├── Info.plist
│   ├── Settings.plist
│   ├── index.html
│   └── index.js
├── dist
├── package.json
├── src
│   └── index.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

错误

[nodemon] starting `yarn run build`
warning ../package.json: No license field
$ ./node_modules/.bin/webpack
Hash: e42a920b430f30cdd9f4
Version: webpack 3.10.0
Time: 1637ms
   Asset     Size  Chunks             Chunk Names
index.js  4.08 kB       0  [emitted]  main
   [0] ./src/index.js 1.61 kB {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed: TypeError: Cannot read property 'helpers' of undefined
    at _default (/Users/noah/Projects/ReduxDevtoolsExtension/node_modules/@babel/plugin-transform-runtime/lib/index.js:17:25)
    at Function.memoisePluginContainer (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/noah/Projects/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/noah/Projects/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/noah/Projects/ReduxDevtoolsExtension/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/Users/noah/Projects/ReduxDevtoolsExtension/node_modules/babel-loader/lib/index.js:175:20)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[nodemon] app crashed - waiting for file changes before starting...

- Noah

---

遇到了相同的问题 :( - Fezzy

没有一个答案适用于我:( - Sabrina Luo

Answer 1

如果你正在使用babel-loader@7，这是自动安装的，并且与@babel/core beta一起使用，请尝试使用babel-loader@^8.0.0-beta.0。

yarn add --dev babel-loader@^8.0.0-beta.0

- Noah

Answer 2

你在使用 babel-loader@8 时仍然会收到这个信息，但是无论如何都是必要的，因为 @7 指向 babel-core@6。由于助手错误是特定于通过 babel-register 运行的 transform-runtime 插件，因此你需要确保也更新了 babel-register：

$ yarn add @babel/register

如果 babel-register 无法解决您的问题，那么很可能是另一个依赖项指向了旧版本。如果没有依赖项，这将是一个微不足道的过程。

其他人（包括我自己）发现，在脚本中传递 babel-register@7 时也会出现这种情况。（例如：node -r babel-register webpack-dev-serv --config webpack.config）

最后，您可以从 babelrc 的插件中删除 transform runtime。我知道这不是理想的解决方法，但这是一个临时的方法，可以绕过此错误，直到 Babel@7 具有文档并稳定下来。

我希望这能帮助您或其他遇到此问题的人，这里是官方问题链接：official issue。

- DBrown