只允许使用一个babel-polyfill实例

Question

I am getting the following error

Uncaught Error: only one instance of babel-polyfill is allowed
    at Object.eval (index.js?db4d:10)
    at eval (index.js:29)
    at Object../node_modules/babel-polyfill/lib/index.js (vendors.js?3b19ee46035be2acbd36:310)
    at __webpack_require__ (vendor.js?3b19ee46035be2acbd36:79)
    at Object.4 (vendor.js?3b19ee46035be2acbd36:165)
    at __webpack_require__ (vendor.js?3b19ee46035be2acbd36:79)
    at checkDeferredModules (vendor.js?3b19ee46035be2acbd36:46)
    at vendor.js?3b19ee46035be2acbd36:152
    at vendor.js?3b19ee46035be2acbd36:155

Here is my package.json :

{
  "name": "something",
  "version": "1.0.0",
  "description": "something",
  "main": "index.js",
  "scripts": {
    "test": "cross-env TZ=utc jest --verbose",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --hot --inline --mode development"
  },
  "author": "Great Company",
  "license": "UNLICENSED",
  "private": true,
  "jest": {
    "globals": {
          ...
      }
    },
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.tsx?$": "ts-jest"
    },
    "setupTestFrameworkScriptFile": "./setup-jasmine-env.js",
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|svg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$": "jest-static-stubs/png"
    },
    "collectCoverage": true,
    "coverageReporters": [
      "html"
    ]
  },
  "dependencies": {
    "@types/react": "^16.4.4",
    "@types/react-dom": "^16.0.6",
    "axios": "0.15.3",
    "babel-polyfill": "6.26.0",
    "bootstrap": "3.3.7",
    "detect-browser": "2.1.0",
    "react": "15.6.2",
    "react-bootstrap": "0.30.10",
    "react-datepicker": "0.58.0",
    "react-dom": "15.6.2",
    "react-redux": "5.0.6",
    "react-router": "3.2.0",
    "react-router-redux": "4.0.8",
    "react-select": "1.1.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "reselect": "3.0.1"
  },
  "devDependencies": {
    "@types/jasmine": "^2.8.8",
    "@types/jest": "^23.1.4",
    "@types/node": "^10.5.1",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-jest": "19.0.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-2": "6.24.1",
    "cross-env": "5.1.3",
    "css-loader": "0.26.4",
    "deep-freeze": "0.0.1",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-reporters": "2.3.0",
    "jest": "^23.3.0",
    "jest-static-stubs": "0.0.1",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "1.3.2",
    "redux-devtools-extension": "2.13.2",
    "source-map-loader": "^0.2.3",
    "style-loader": "0.13.2",
    "ts-jest": "^23.0.0",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
} 

In my webpack.config.js , I have:

const config = {
    entry: {
        main: path.join(SRC_DIR, 'app', 'index.js'),
        vendor: [
            'axios',
            'babel-polyfill',
            'react',
            'react-bootstrap',
            'react-dom',
            'react-redux',
            'react-router',
            'react-router-redux',
            'react-select',
            'redux',
            'redux-devtools-extension',
            'redux-thunk',
            'reselect'
        ]
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(SRC_DIR, 'static', 'index.html'),
            hash: true,
            inject: false
        }),
        new MiniCssExtractPlugin('css/styles.css')
    ]

I tried removing the HtmlWebpackPlugin entirely and adding the inject: false field and the error still occurs. Any help would be greatly appreciated.

Answer 1

Only options:

• You are requiring twice (you have said no)
• Some library you are using on the page is also requiring it (this is your answer 🌹)