babel-loader: babel-polyfill - error Error: only one instance of babel-polyfill is allowed

There was another 3rd party library which included the babel-polyfill in their bundle. To fix this I had to remove the babel-polyfill from the entry in webpack.config and add a conditional require to the top of my index.js which is the entry point.

Before webpack.config:

module.exports = {
	entry : [
		'babel-polyfill', './src/index'
	]
}

After webpack.config:

module.exports = {
	entry : [
		'./src/index'
	]
}

Added to the top of ./src/index.js:

if (!global._babelPolyfill) {
	require('babel-polyfill');
}

Now everything works without issue.

I was also seeing this error, but after checking my html, I was also including my bundled JS twice. Fixed by updating my HTML to ensure I only include my bundle once

I had a Chrome extension that was using babel-polyfill, which was causing this error. Took forever to track that down!

Another way to fix this is by setting global._babelPolyfill = false; at the top of your index.js file.

Please you exclude babel-polyfill from your codes or exclude from webpack.entry. There can only be one instance of babel-polyfill.

Idempotent Babel Polyfill can be imported multiple times

npm install --save idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

When you need to actually import ‘babel-polyfill’ instead of require it, you can achieve @lipemat’s solution by adding a new file require-babel-polyfill.js with following contents:

export default (() => {
  if (!global || !global._babelPolyfill) {
    require('babel-polyfill')
  }
})()

and import that file in at the top of your apps entry point (index.js):

import './require-babel-polyfill.js'

You should replace every "babel-polyfill" (either in imports, or in your webpack config’s entry option) with "idempotent-babel-polyfill"

I had a similar problem using webpacker. I was loading two javascript apps on the same page using the javascript_pack_tag. Each one loads an instance of babel-polyfill. I was able to resolve the issue by merging both apps and using a single loading point.

@visualjerk, aka idempotent-babel-polyfill

@codejamninja Yeah, seems like your module is achieving the same. I actually did not try it out, because the solution was pretty simple.

Thanks for putting this on npm, making it even easier to use.

as @abouthiroppy already said, you either load the app bundle twice or you import babel-polyfill somewhere else in your code. Ensure it is only used once.