webpack 2 doesn't work on IE11?

Question

I have a very basic javascript-project that uses webpack (^2.6.0) as a module bundler. There is one dependency as a vendor module, and I have one entry point. My configuration is as follows:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        bundle: './modules/main.js',
        vendor: ['react']
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[id].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor"
        })
    ]
};

This creates the bundles bundle.js and vendor.js. The vendor-bundle also contains the webpack-bootstrap-code, which is loaded BEFORE any of my modules are loaded. Now, inspecing that bootstrapping code reveals that on line 40, webpack generated

/******/    var resolvedPromise = new Promise(function(resolve) { resolve(); });

Unfortunately, Promise is not available on IE11, and even if you include a polyfill that includes Promise (with e.g. import 'babel-polyfill') as the first thing in the entry point, or even as its own entry point, it will never get executed before the bootstrapping code runs, which means I can't use this code on IE11 unless I include a Promise-polyfill manually before my webpack-bundles. Unsurprisingly, IE11 throws a Promise is not defined error before I even get to any of my code or even to the vendor bundle.

Am I missing something here or is this the expected behavior? I can't find anything in the webpack docs to counteract this issue.

Answer 1

This seems to be an issue introduced with webpack 2.6.0, a bug is already issued: https://github.com/webpack/webpack/issues/4916

Answer 2

I had a similar issue when moving to babel 7. I was not specifying the useBuiltIns key so the polyfills were not being applied.

"useBuiltIns": "usage" is the important line I was missing.

"debug": true was also very helpful in determining what polyfills were being applied

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["IE >= 11"]
        },
        "useBuiltIns": "usage",
        "debug": true
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
      "@babel/plugin-proposal-object-rest-spread", 
      "@babel/plugin-proposal-class-properties", 
      "@babel/plugin-transform-classes"
  ],
  "ignore": ["/node_modules/*"]
}