App crashes in Internet Explorer instead of showing Unsupported Browser Warning

[mh-coreplus]

Describe the bug
Application crashes (blank page) on internet explorer 11 instead of showing the Unsupported Browser Warning page. Console shows 'Promise' is undefined error. App crashes whether running locally or when deployed using Twilio cli.

To Reproduce
Steps to reproduce the behavior:

1. Clone twilio-video-react-app
2. Follow readme to build and deploy to Twilio-cli
3. Launch internet explorer from windows start menu and visit url to newly deployed app
4. Blank page
5. Open console to see 'Promise' is undefined error

Expected behavior
App must not crash and instead display unsupported warning UI

Screenshots

Environment (please complete the following information):

• OS: Windows 10 20H2
• Browser: Internet Explorer 11 on Win10
• App Version: 0.3.1
• SDK Version: twilio-video:2.13.1
• Node.js version: 14.16.1 LTS

[olipyskoty]

Hi @mh-coreplus! Thank you for bringing this to our attention. Since we don't support Internet Explorer, we don't do any testing with this browser. That being said, I was able to reproduce your issue and do not see the Unsupported Browser warning as well. I've added a bug ticket to our backlog, and we'll let you know as soon as the fix is merged!

[timmydoza]

Hi @mh-coreplus - thanks for the issue!

Unfortunately, this app (or the Twilio-Video SDK) isn't designed to support Internet Explorer. It isn't set up to include the required polyfills (like Promise which is why you are seeing the Promise is not defined error).

However, it is quite easy to configure this application to include the required polyfills. This app is built with Create React App, so there's some good information on this page, but I'll go ahead and outline the required steps below:

1. Install the react-app-polyfill package by running npm i -S react-app-polyfill

2. Next we need to include the right polyfills for IE 11. Add the following two lines of code to the very beginning of src/index.ts. These must be the first lines in the file:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

3. Last, we need to instruct babel to compile the source code to a version that can be run by IE 11. This can be done by adding "ie 11" to the browserslist object in package.json. Update package.json so the the browserslist object looks like this:

  "browserslist": {
    "production": [
      "ie 11",
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

Note: When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.

That's it! This should get the Unsupported Browser Warning to appear in Internet Explorer. Be aware that the extra polyfills add about 43kb to the compressed bundles produced by npm run build.

At this time, we won't be adding the fix to this app, but I'll be sure to update this issue if we ever change our minds. Please let me know how this solution works out for you!