I have this in my webpack.config.js
to create two different outputs from two sources:
module.exports = {
entry: {
'dist/index.js': ['babel-polyfill', './src/Component.jsx'],
'example/bundle.js': ['babel-polyfill', './src/Page.jsx'],
},
output: {
path: './',
filename: '[name]',
},
...
Compiling it with webpack works just fine, but if I load index.js
in a browser I get this error:
Uncaught Error: only one instance of babel-polyfill is allowed
I need babel-polyfill for both outputs. What can I do?
When developing a library (as opposed to an application), the Babel team does not recommend including babel-polyfill
in your library. We recommend either:
babel-polyfill
in their own codebase.babel-runtime
by enabling babel-plugin-transform-runtime
, which attempts to analyze your code to figure out what ES6 library functionality you are using, then rewrites the code to load the polyfilled logic from babel-runtime
instead of from the global scope. One downside of this approach is that it has no way to polyfill new .prototype
methods like Array.prototype.find
since it can't know if foo.find
is an array.So my recommendation would be to remove babel-polyfill
from your dist/index.js
bundle entirely.