ES6 `fetch is undefined`

Question

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?

Answer 1

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

Answer 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>

Answer 3

Just went through this last night. In the end, after trying all sorts of things, the solution was fairly simple:

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

became

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

TL;DR fetch(stuff) should be window.fetch(stuff) EDIT This worked for me on Chrome

Answer 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'
})

Answer 5

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