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(\         


        

Answer 1

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 2

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 3

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 4

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;

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

Answer 6

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