How to support fetch and promise on Internet Explorer with Visual Studio typescript/react project
If you created a typescript/react project using the Visual Studio 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:
