reactjs - “只允许一个 babel-polyfill 实例”错误

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']
    }
  }
]}

Answer 1

如果罪魁祸首是 HtmlWebpackPlugin，则需要inject: false在实例化插件时添加该选项。没有此选项的某些配置会导致您构建的 javascript 代码被加载两次。

Answer 2

Idempotent Babel Polyfill 可以多次导入

从 NPM 安装

npm install --save idempotent-babel-polyfill

然后导入

import 'idempotent-babel-polyfill';

Answer 3

Only one instance of babel-polyfill is allowed如果在使用 CommonsChunkPlugin 或 HtmlWebpackPlugin 时被包装的文件顺序不正确，通常会出现。

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

使用"webpack": "^1.14.0"：

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

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

Answer 4

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

Answer 5

可能你是从其他一些 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 ，需要将其添加到插件列表中才能使用它。如果在某处记录在案，将会有所帮助。