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

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;