15

I need help diagnosing and fixing this error:

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

I have the following in my 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" ...

And this and this entry line in my webpack config: 

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
  • 3,849
  • 8
  • 22
  • 32
  • Looks like the culprit is HtmlWebpackPlugin in my webpack config. If I remove this plugin, I the error goes away. – foobar May 10 '17 at 21:28
  • try changing entry: ["babel-polyfill", path.resolve(APP_PATH, 'index')] to entry: [path.resolve(APP_PATH, 'index')] – m.rohail.akram May 11 '17 at 02:37
  • I am using babel-polyfill, so I need to have it somewhere. I can also add an import somewhere instead, but I get the same error then. If I remove it I get errors: Uncaught ReferenceError: regeneratorRuntime is not defined. – foobar May 11 '17 at 09:24

5 Answers5

11

If the culprit is HtmlWebpackPlugin, you need to add the option inject: false when instancing the plugin. Certain configurations without this option causes your built javascript code to be loaded twice.

Aethix
  • 119
  • 1
  • 3
7

Idempotent Babel Polyfill can be imported multiple times

Install from NPM

npm install --save idempotent-babel-polyfill

Then import it

import 'idempotent-babel-polyfill';
Clay Risser
  • 3,272
  • 1
  • 25
  • 28
3

Only one instance of babel-polyfill is allowed usually appears if the order of files being wrapped isn't correct when making use of CommonsChunkPlugin or HtmlWebpackPlugin.

for HtmlWebpackPlugin you can manually sort your files with chunksSortMode

Using "webpack": "^1.14.0":

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

Source: gdi2290 @ GitHub - 1 Jul. 2016 / 22 Jan. 2018

Wouter Vanherck
  • 2,070
  • 3
  • 27
  • 41
1

Possibly you are getting it indirectly from some other babel module.

Possible Solutions:

  1. Make all versions of babel modules same.Possibly error is due to different versions of babel-polyfil.
  2. Remove babel-polyfil from package.json so it will be used from
    babel-plugin-transform-object-rest-spread.

reference: https://github.com/babel/babel/issues/1019

comment by jameslk

I figured it out anyway. It looks like babel-runtime has been moved to babel-plugin-transform-runtime and this needs to be added to the list of plugins to use it. Would of helped if that was documented somewhere.

m.rohail.akram
  • 350
  • 1
  • 11
  • 1
    Sorry for the late reply and thank you very much for your answer. I have tried a few things and ended up removing HtmlWebpackPlugin from my dependencies. Not an ideal solution, but at least the error is gone. Considering the two solutions you provided: 1. I could only find one babel-polyfill installation in my node-modules, 2. after removing babel-polyfill I still get the same error. I think, the problem is that I had *babel-cli* and *html-webpack-plugin* in my dependencies and I couldn't figure out how to make them co-exist. – foobar May 15 '17 at 15:13
  • You was right. I tried to look for which library is using the babel-polifill in the "package-lock.json" and updated the third-party library to the latest one then the message disappeared. – technik Apr 30 '22 at 00:54
0

I had the same issue and I get rid of the error by removing require('babel-polyfill'); from the index.js script.

Cata Hotea
  • 1,811
  • 1
  • 9
  • 19