Making a React Typescript application work on Internet Explorer 11

  So you started working on a React application with Typescript and, after running npx create-react-app someapplicationname --template typescript you executed npm run start and Internet Explorer 11 opened up with a blank page and an unexpected colon issue in the console. Heh, that's not a pun! You click on the error and you see that somehow the rendered website is using Javascript modules which, of course, are not supported by Internet Explorer.

  Why, oh why, would the default browser be set to Internet Explorer? Because you might be working for a company that is high in paranoia and low in technical competence and the only way its house of cards security would work is using obsolete bug ridden hackable systems based on old technology. This post is not about solving corporate culture, though.

  Don't overthink it! Just follow these steps in the Visual Studio Code terminal or an admin command prompt in the folder of your application and never think about it again:

• make sure you kill the server if it is running (Ctrl-C, then Y in the terminal where you ran npm run start)
• run npm i fast-text-encoding in the terminal
• edit index.tsx and add these lines at the very beginning:
  import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable';
  import 'fast-text-encoding/text';
• edit package.json and add the value "ie 11" in the browserlist/development array (or you might want to replace the entire browserlist value with a simple array containing ["ie 11"])
• from the left side expand the node_modules folder and delete the .cache folder (Shift-Right click to avoid deleting to Recycle bin)
• run npm run start in the terminal again
• make sure that the page in Internet Explorer 11 is also completely refreshed by pressing Ctrl-F5

  Now the page should work.

  More on this on the React issue page IE11 support doesn't work in dev mode, even after adding all polyfills and enabling ie11 support #8197