CODEWITHSUNDEEP
reactjswebpackbabeljsbabel-polyfill
foobar
foobar

Reputation: 4019

"Only one instance of babel-polyfill is allowed" error

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

Upvotes: 15

Views: 38267

Answers (5)

Cata Hotea
Cata Hotea

Reputation: 1933

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

Upvotes: 0

Clay Risser
Clay Risser

Reputation: 3570

Idempotent Babel Polyfill can be imported multiple times

Install from NPM

npm install --save idempotent-babel-polyfill

Then import it

import 'idempotent-babel-polyfill';

Upvotes: 8

Wouter Vanherck
Wouter Vanherck

Reputation: 2308

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

Upvotes: 3

Joelep
Joelep

Reputation: 119

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.

Upvotes: 11

m.rohail.akram
m.rohail.akram

Reputation: 350

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.

Upvotes: 1

Related Questions