How can I use babel-polyfill for multiple separated entries / outputs?

Question

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?

Answer 1

When developing a library (as opposed to an application), the Babel team does not recommend including babel-polyfill in your library. We recommend either:

1. Assume the ES6 globals are present, thus you'd instruct your library users to load babel-polyfill in their own codebase.
2. Use 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.

Answer 2

Use idempotent-babel-polyfill

import 'idempotent-babel-polyfill';

https://github.com/codejamninja/idempotent-babel-polyfill