ES6 `fetch is undefined`

I'm building a site with ES6 and Babel.

In a script file, I need to make an ajax call to a service on server. For that I'm doing like this:

fetch('url').then(
    response => response.json()
).then(
    supervisoryItems => doSomething(supervisoryItems)
)

In Google Chrome this works just fine, but it does not work on Firefox or IE (I'm getting the error fetch is undefined). Searching on Google I found this should fix it:

import promise from 'es6-promise'
promise.polyfill()

Sadly it does not change anything, I have the same issue. Any help?

Solution 1:

You need to add the 'isomorphic-fetch' module to your 'package.json' and then import this.

npm install --save isomorphic-fetch es6-promise

Then in your code

import "isomorphic-fetch"

See https://www.npmjs.com/package/isomorphic-fetch

Solution 2:

I will use the two following cdn like this:

<script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>

Solution 3:

Babel-polyfill (http://babeljs.io/#polyfill) currently doesn't include fetch in the polyfill. I was thinking of adding it though.

But yeah can use https://github.com/github/fetch

Solution 4:

You can also use Webpack's ProvidePlugin with the imports-loader and exports-loader packages as described in this answer, which removes the need to import anything in your code:

config.plugins = [
    new webpack.ProvidePlugin({
      'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    })
];

At the time of writing there's a compatibility issue with the 3.0.0 version of whatwg-fetch. The workaround is using the following:

new webpack.ProvidePlugin({
    fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd'
})

Solution 5:

I prefer to use isomorphic-unfetch instead of isomorphic-fetch, because it is able to work like a ponyfill and not a polyfill.

The difference is that it doesn't affect the rest of code and it is more transparent of the dependencies you have.

Install:

yarn add isomorphic-unfetch

Usage:

// using ES6 modules
import fetch from 'isomorphic-unfetch';

// using CommonJS modules
var fetch = require('isomorphic-unfetch');