2

This fetch works fine in Chrome:

fetch( this.props.url, {credentials:'same-origin'})
    .then( (data) => data.json() )
    .then( (data) => {
      if( data.length > 0) {
          // do some stuff
      } else {
          console.log('No data Richard of the Beard of the Lewis.');
      }
});

I am using isomorphic-fetch, and I am polyfilling my promise with promise-polyfill. I'm using webpack and babel to compile the js.

When I execute this code in IE11, the initial fetch of data executes and my response does contain the requested data, but nothing within my then appears to execute at all (I've applied console.logs in several different places to see if they were twitching at all after the fetch completed...no go). I have no console errors, so I assume IE11 is happy enough with the compiled js' syntax.

Does anybody have a clue for me to try? Do I need to re-write my fetch statement in some more verbose way so that IE11 will execute it completely? Anything is helpful at this point! Thanks for any input.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Doug Boude
  • 27
  • 1
  • 5
  • I have fetch working in IE11, but I'm using `babel-polyfill` not just the `promise-polyfill`. You might try that :) – Davin Tryon Dec 13 '16 at 16:34
  • It sounds like fetch is working but your Promise polyfill isn't. Did you add "if (!window.Promise) { window.Promise = Promise; }" somewhere in your code per the docs? https://github.com/taylorhakes/promise-polyfill/blob/master/README.md – Jeff McCloud Dec 13 '16 at 17:08
  • Works for me too on IE 11 – Harkirat Saluja Dec 13 '16 at 18:52

4 Answers4

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'
]
alexrussell
  • 13,856
  • 5
  • 38
  • 49
0

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. :)

Doug Boude
  • 27
  • 1
  • 5
0

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

EugenSunic
  • 13,162
  • 13
  • 64
  • 86
0

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

Akash M
  • 1
  • 2