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?

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

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>

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

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

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');

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

There is browser support for every new functionality added in Javascript. You can see browser support on https://caniuse.com/#feat=fetch

Follow the following 2 steps to use fetch on IE11

Step 1: Install 3 packages

npm i whatwg-fetch @babel/polyfill es6-promise --save

@babel/polyfill - to use polyfill in babel

whatwg-fetch - includes fetch functionality

es6-promise - fetch polyfill includes promise which is also not supported by IE11

Step 2: Add Entry Point in webpack.config

entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"]

require("es6-promise").polyfill();

const config = {
  entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"],
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules : [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

module.exports = config;

Window.fetch or fetch is the same... technically fetch() is a global method of the Window object