Babel-loader: babel-polyfill - error Error: only one instance of babel-polyfill is allowed
I'm submitting a bug report
Webpack Version:
1.14.0
Babel Core Version:
6.23.1
Babel Loader Version:
6.3.2
Please tell us about your environment:
Windows 10
Current behavior:
I try to use babel-polyfill for ie11 with webpack
entry: {
app: ['babel-polyfill','./src/main.js']
}
After ie11 reconize Array.includes but in some pages i have error in other browsers like Firefox
error Error: only one instance of babel-polyfill is allowed
ozee31
All 24 comments
Have you imported with ./src/main.js already?
hiroppy
on 2 Mar 2017
yes but i have the same message
ozee31
on 3 Mar 2017
Please you exclude babel-polyfill from your codes or exclude from webpack.entry.
There can only be one instance of babel-polyfill.
hiroppy
on 6 Mar 2017
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.
danez
on 6 Mar 2017
I only included it once but i have always this message. But not every time, just on some components.
It must be my fault
ozee31
on 6 Mar 2017
I came across this error and found that I was loading my javascript inside the body of my application instead of the head.
IvanKelber
on 6 Mar 2017
I came across this error and found that I was loading my javascript inside the body of my application instead of the head.
Really, so moving into <head> fixed it? That seems strange..
tmm1
on 11 Mar 2017
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.
aaronromeo
on 21 May 2017
I close my issue, think you for yours answers
ozee31
on 26 May 2017
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
swarajban
on 16 Jun 2017
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.
lipemat
on 14 Feb 2018
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.
timperkins
on 20 Mar 2018
@lipemat I did the first part of what you said for a different project (https://github.com/richardtallent/vue-simple-calendar/tree/2.2.1) but without the if(!global.etc).. part added and it worked fine. However that may be the requirements of that package in this case.
samfullman
on 23 Mar 2018
Related to https://github.com/babel/babel/issues/4019
yvele
on 3 Apr 2018
Idempotent Babel Polyfill can be imported multiple times
npm install --save idempotent-babel-polyfill
import 'idempotent-babel-polyfill';
clayrisser
on 15 Apr 2018
Excuse me!
I would like to know where to put import 'idempotent-babel-polyfill';?
In my index.js or in webpack.config.js?
MarkSky
on 13 Jun 2018
You should replace every "babel-polyfill" (either in imports, or in your webpack config's entry option) with "idempotent-babel-polyfill"
nicolo-ribaudo
on 13 Jun 2018
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'
visualjerk
on 26 Jun 2018
@visualjerk, aka idempotent-babel-polyfill
clayrisser
on 27 Jun 2018
@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.
visualjerk
on 27 Jun 2018
@visualjerk, it also works in the browser, because babel-polyfill attaches to the window object in a browser.
clayrisser
on 27 Jun 2018
@lipemat this approach is the good way
hejiaji
on 20 Sep 2018
@swarajban thanks man it helped me too
mohanasundarR
on 6 Feb 2019
thanks
BlackeyCat
on 4 Sep 2020
Related issues
ghost
路
23Comments
pkosenko
路
24Comments
jamro
路
19Comments
NXTaar
路
22Comments
MatTheCat
路
20Comments
Most helpful comment
There was another 3rd party library which included the
babel-polyfillin their bundle. To fix this I had to remove thebabel-polyfillfrom the entry inwebpack.configand add a conditional require to the top of myindex.jswhich is the entry point.Before webpack.config:
After webpack.config:
Added to the top of ./src/index.js:
Now everything works without issue.