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

时间:2018-07-09 17:18:33

标签: javascript reactjs typescript babeljs babel-polyfill

我遇到以下错误

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

这是我的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"
  }
} 

在我的webpack.config.js中,我有:

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

我尝试完全删除HtmlWebpackPlugin并添加inject: false字段,但错误仍然出现。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

仅选项:

  • 您需要两次(您说不)
  • 您正在页面上使用的某些库也需要它(这是您的答案)