Uncaught Error: only one instance of babel-polyfill is allowed error on production

问题

I tried all the potential solutions but they did not work. What happens if I have babel-polyfill error on production. Some browsers do not work?

📷

I am currently using react-loadable to create chunks by page. After that I am getting babel-polyfill error.

webpack.prod.js

entry: ['babel-polyfill', path.resolve(CWD, './react/containers/root/root.prod.js')],

.babelrc

{  
   "presets":[  
      "react",
      "es2015",
      "stage-2"
   ],
   "plugins":[  
      "react-loadable/babel",
      "syntax-dynamic-import",
      "dynamic-import-node",
      [  
         "babel-plugin-webpack-alias",
         {  
            "config":"${PWD}/config/aliases/aliases.config.js"
         }
      ],
      [  
         "import-inspector",
         {  
            "serverSideRequirePath":true,
            "webpackRequireWeakId":true
         }
      ]
   ]
}

and uses babelrc with babel-core like this for node server

babel-core/register(babelrc)

And adding this plugins to the babel-loader

const plugins = [
  // 'transform-decorators-legacy',
  'syntax-dynamic-import',
  'transform-react-loadable',
  'react-loadable/babel',
  'recharts',
  'transform-runtime',
  ['import-inspector', {
    'serverSideRequirePath': true,
    'webpackRequireWeakId': true,
  }],
]

And there is no other place using babel-polyfill in my code.

I went through most of the similar questions in reddit and stackoverflow. Most of the cases this issue resolves when they remove duplicate poly fill.

I never had this issue until I implemented code split...

Added dev dependencies

 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.0",
    "babel-jest": "^22.4.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.3",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "chalk": "^2.4.0",
    "compression-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.5.1",
    "css-modules-require-hook": "4.0.6",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-airbnb-base": "^12.0.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-watch": "^3.1.2",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "husky": "^0.15.0-rc.9",
    "ignore-loader": "^0.1.2",
    "jest": "^22.4.3",
    "lazysizes": "^4.0.1",
    "mobile-detect": "^1.4.1",
    "postcss-loader": "^2.0.9",
    "postcss-modules-values": "^1.3.0",
    "postcss-nested": "^2.1.2",
    "puppeteer": "^1.4.0",
    "rc-tooltip": "^3.7.2",
    "react-hot-loader": "^3.1.3",
    "react-id-swiper": "^1.6.4",
    "react-masonry-component": "^6.0.0",
    "react-scroll": "^1.7.9",
    "react-tabbordion": "^1.0.2",
    "react-vertical-timeline-component": "^2.2.0",
    "react-visibility-sensor": "^3.11.0",
    "recharts": "^1.0.0-beta.10",
    "redux-devtools": "^3.4.1",
    "redux-devtools-dock-monitor": "^1.1.2",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-logger": "^3.0.6",
    "style-loader": "^0.19.0",
    "svg-to-json-webpack-plugin": "^1.1.1",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "webpack": "4.19.1",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-cli": "3.1.2",
    "webpack-dev-middleware": "^3.0.0",
    "webpack-hot-middleware": "^2.21.2",
    "webpack-merge": "^4.1.2",
    "why-did-you-update": "^0.1.1",
    "workbox-webpack-plugin": "^3.1.0"
  }