Search code examples
javascriptinternet-explorer-11webpack-4babel-loaderbabel-polyfill

Babel 7 does not polyfill Promise, Fetch and some JavaScript files (like in a vendor file) in IE11


I upgraded to Babel 7. It works fine in evergreen browsers like Opera and Chrome. But in IE11, Promise and Fetch API are not polyfilled in JavaScript. When I manually polyfill them, I then see a strange issue where a vendorXYZ.js file still has ES6 code (SCRIPT error). How do I fix this?


Solution

  • Babel 7 has an issue where it does not polyfill Promise and Fetch API. This not a problem in evergreen browsers as they support these natively. But it is a huge problem in IE11 which lacks native support. I could not find a way to make Babel polyfill them. The workaround was to polyfill them myself. I used bluebird to polyfill Promise, and whatwg-fetch to polyfill fetch.

    I believe a trend will soon start where npm package publishers will not bother providing a built-version of their code in ES5. Anyways, it is common not to have Babel transpile packages in node_modules. So, you may have a JavaScript file written in ES6 but being passed to IE11, which causes a problem. I recommend glancing at the vendor file or whatever file webpack outputs to and try to see if you have figure out what package has ES6+ code. I personally had an issue with query-string version 6. The fix is to either downgrade to a different version with ES5 or transpile the code with babel-loader.