Short version
When I run my application in IE11, I get the Promise is undefined error message from the manifest.js file.
How to add babel-polyfill or the like so that it babel-polyfill until the manifest is done?
Long version
I am trying to add CommonsChunkPlugin to my webpack configuration in order to separate third-party (npm) scripts in a separate bundle. According to the Webpack 2 documentation, I installed " combined implicit shared chunks of the provider and a manifest file that works well in modern browsers.
I wrote a function to ensure that the chunks will be included in my index file in the correct order (see below).
A bit of background at my two explicit entry points:
- legacy_libs - Old libraries placed in the global namespace with
script-loader . I hope that over time they will be fabricated. - main - My main entry point to the application
The other two (provider and manifest) are implicit and created using CommonsChunkPlugin.
When I run this with IE11, I get the error message: Promise is undefined . This seems to be due to the fact that the webpack manifest itself calls new Promise() .
At my main entry point, I have import 'babel-polyfill'; . Before I added the provider and manifest, this allowed me to overcome IE's lack of Promises. But now, when I load manifest.js first, I cannot figure out how to enable it in the correct order.
My config looks like this:
module.exports = { entry: { legacy_libs: './app/libs.js', main: './app/main.js' }, ... plugins: [ // Extract third party libraries into a separate vendor bundle. // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when app source changes) new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { return module.context && module.context.indexOf('node_modules') !== -1; } }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }), // Generate index.html file. // Include script bundles in the right order based on chunk name prefixes. new HtmlWebpackPlugin({ template: 'app/index.ejs', chunksSortMode: function (a, b) { const chunkOrder = ['manifest', 'vendor', 'legacy_libs', 'main']; const aChunk = chunkOrder.findIndex(chunk => a.names[0].startsWith(chunk)); const bChunk = chunkOrder.findIndex(chunk => b.names[0].startsWith(chunk)); const aValue = (aChunk > -1) ? aChunk : chunkOrder.length; const bValue = (bChunk > -1) ? bChunk : chunkOrder.length; return aValue - bValue; } }) }