fetch and Headers are undefined in IE11.0.9600 with babel-polyfill when process.env.NODE_ENV=='production'

Question

When process.env.NODE_ENV=='development' - it is OK!

But our production build failed in IE 11 (11.0.9600). All work fine in chrome 55.

devDependencies:

...
babel-core: "6.22.0",
babel-eslint: "^7.0.0",
babel-loader: "^6.2.5",
babel-preset-env: "^1.5.2",
babel-preset-es2015: "^6.16.0",
babel-preset-es2016: "^6.22.0",
babel-preset-es2017: "^6.16.0",
babel-preset-react: "^6.16.0",
babel-preset-stage-0: "^6.22.0"
...

dependencies:

...
babel-polyfill: "^6.16.0"
...

.babelrc:

{
    "presets": [
        "react",
        ["env", {
             "useBuiltIns": true
        }],
        "stage-0"
    ]
}

Try "useBuiltIns": false, es2016, es2015, es2017 presets. Nothing changes.

index.js:

"use strict";
import 'babel-polyfill'
...

webpack.config module.exports.entry:

vendor: ['babel-polyfill', 'immutable', 'react', 'react-dom', ...],
...
bundle: [path.resolve(__dirname, srcPath + ""index.js)]

vendor is the first script in index.html.

Typing _babelPolyfill in ie console return true. But Headers, fetch are undefined...

Why process.env.NODE_ENV=='production' broke my app in IE11? How to fix my config?

Answer 1

core.js do not have polyfill for Headers() and fetch, so babel-polyfill don't. Use one of fetch polyfills:

• whatwg-fetch polyfill for browsers only support https://github.com/github/fetch
• isomorphic-fetch - polyfill, based on whatwg-fetch, for node and browsers support

For more info:

https://github.com/zloirock/core-js

What is the difference between isomorphic-fetch and fetch?