Add Support for Fetch and Promise to Internet Explorer

Development
Ken Foubert
08/17/18

How to support fetch and promise on Internet Explorer with Visual Studio 2017 typescript/react project

If you created a typescript/react project using the Visual Studio 2017 template this solution will add support for fetch and promise to Internet Explorer and older android browsers. I was able to figure out the solution by reading Polyfilling Fetch and Promises by Barry Kooij and reviewing the documentation for whatwg-fetch and promise-polyfill.

This solution works for the following tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "strict": true,
    "types": [ "webpack-env" ]
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

 

Install whatwg-fetch and promise-polyfill

Open your terminal of choice and go to the root folder of the application, where the node_modules folder is located and run the following commands to install whatwg-fetch and promise-polyfill. This will also update your package.json file.

npm install whatwg-fetch –save
npm install promise-polyfill --save-exact

 

Edit boots.tsx file

Add the following lines after the other import statements.

import "whatwg-fetch";
import "promise-polyfill/src/polyfill";

 

Tah-dah!

Fetch and Promise should now work with older browsers.

There are also many libraries which implement the Promise and/or XMLHttpRequest specifications cross-browser and offer some syntactic sugar.

Promise examples:

XMLHttpRequest example: