Fetch Polyfill In React Not Completely Working In Ie 11

This fetch works fine in Chrome: fetch( this.props.url, {credentials:'same-origin'}) .then( (data) => data.json() ) .then( (data) => { if( data.length > 0) {

Solution 1:

Looking at isomorphic-fetch, the package is just a meta-package of sorts that import-exports either whatwg-fetch or node-fetch depending on whether you are in a browser or Node context.

I think your issue is that it will use the node version by default (see the main entry in the package.json).

Being a polyfill, it is simply skipped on non-IE as the browsers support fetch by default. On IE11 the polyfill is used, but it's the Node polyfill which won't work in a browser.

You might be able to coerce webpack to use the browser version by including the browser specific version:

require('isomorphic-fetch/fetch-npm-browserify')

or

import'isomorphic-fetch/fetch-npm-browserify'

or in Webpack config:

entry: [
    'isomorphic-fetch/fetch-npm-browserify','app.js'
]

Solution 2:

So here's what I ended up using that worked for me:

require('es6-promise').polyfill();
require('fetch-everywhere');

I had tried two other fetches that were touted as being magical and polyfilling, but the combo above is what finally allowed me to get to the REST of the IE incompatibilities in my code. :)

Solution 3:

You need to include the following files in order for fetch.js to work inside IE 11+

• './node_modules/es6-promise/dist/es6-promise.auto.js'
• 'isomorphic-fetch'

Before running the webpack command you have to make sure you've installed these files in node_modules, run this:

npm install --save isomorphic-fetch es6-promise

then put this within webpack entry property:

  entry: [
    './node_modules/es6-promise/dist/es6-promise.auto.js',
    'isomorphic-fetch',
    'path for main file'
  ]

Now type the webpack keyword in your terminal/cmd and you should have a file located in your dist folder (if you haven't specified some other output path) with the polyfill's available.

Here is the official github fetch.js polyfill page

Solution 4:

We need to add a polyfill for fetch in IE, please refer to this polyfill that works for you https://github.com/github/fetch