“Only one instance of babel-polyfill is allowed”错误

Question

我需要帮助诊断和解决这个错误:

"Error: only one instance of babel-polyfill is allowed"

我在我的package.json文件中有以下内容：

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0" ...

"dependencies": {
    "babel-polyfill": "^6.23.0" ...

而且这一行和下面这一行在我的webpack配置文件中：

entry: ["babel-polyfill", path.resolve(APP_PATH, 'index')],
...
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      // specify that we will be dealing with React code
      presets: ['react', 'es2015']
    }
  }
]}

- foobar

---

看起来问题出在我的webpack配置中的HtmlWebpackPlugin插件上。如果我移除这个插件，错误就消失了。 - foobar

尝试将以下条目更改为：entry: [path.resolve(APP_PATH，'index')]，条目为：["babel-polyfill"，path.resolve（APP_PATH，'index') ] - m.rohail.akram

我正在使用babel-polyfill，所以我需要在某个地方引入它。我也可以在某个地方添加一个import，但是我会得到相同的错误。如果我将其删除，则会出现错误：Uncaught ReferenceError：regeneratorRuntime未定义。 - foobar

Answer 1

如果问题出在HtmlWebpackPlugin上，你需要在实例化插件时添加选项inject: false。某些没有此选项的配置会导致生成的JavaScript代码被加载两次。

- Aethix

---

非常感谢您的回答！对我也起作用了。 - Holger Ludvigsen

Answer 2

幂等的 Babel Polyfill 可以被多次导入。

从 NPM 安装

npm install --save idempotent-babel-polyfill

然后导入它。

import 'idempotent-babel-polyfill';

- Clay Risser

---

导入应该添加在哪里？在index/main/app.js文件中还是在webpack-config文件中？ - BonisTech

你需要将它添加到你的项目代码中，位置在index/main/app.js文件中。 - undefined

Answer 3

通常情况下，当使用CommonsChunkPlugin或HtmlWebpackPlugin时，如果包装文件的顺序不正确，则会出现“只允许一个babel-polyfill实例”的错误提示。

对于HtmlWebpackPlugin，您可以使用chunksSortMode手动对文件进行排序。

在使用"webpack": "^1.14.0"版本时：

new HtmlWebpackPlugin({
  ...
  chunksSortMode: 'dependency',
  ...
}),

来源：gdi2290 @ GitHub - 2016年7月1日 / 2018年1月22日

这是关于webpack的问题。在使用webpack时，有时会出现文件大小超过预期的情况，这可能是由于一些模块被重复打包导致的。为了解决这个问题，可以考虑使用webpack-bundle-analyzer插件来分析bundle文件，查看哪些模块占用了大量空间，并采取相应措施进行优化。此外，在webpack配置中启用source map选项也有助于定位问题。

- Wouter Vanherck

Answer 4

可能你是间接地从一些其他的babel模块中获取它。

可能的解决方案： 1. 使所有版本的babel模块相同。错误可能由不同版本的babel-polyfil引起。 2. 从package.json中删除babel-polyfil，这样它将从babel-plugin-transform-object-rest-spread中使用。

参考： https://github.com/babel/babel/issues/1019 评论者Jameslk的评论：

我无论如何都弄明白了。看起来babel-runtime已经被移动到babel-plugin-transform-runtime中，并且这需要添加到要使用它的插件列表中。如果有人在某处记录下来这个信息就更好了。

- m.rohail.akram

---

抱歉回复晚了，非常感谢您的答复。我尝试了一些方法，最终将HtmlWebpackPlugin从我的依赖项中删除了。虽然不是理想的解决方案，但至少错误已经消失了。考虑到您提供的两个解决方案：1. 我只能在我的node-modules中找到一个babel-polyfill安装包，2. 删除babel-polyfill后仍然出现相同的错误。我认为问题在于我在依赖项中有babel-cli和html-webpack-plugin，并且我无法弄清楚如何使它们共存。 - foobar

你是对的。我尝试查找哪个库在“package-lock.json”中使用了babel-polifill，并将第三方库更新到最新版本，然后消息消失了。 - technik

Answer 5

我曾经遇到过同样的问题，通过从index.js脚本中删除require('babel-polyfill');来解决了这个错误。

- Cata Hotea