Web Worker onMessage is null in IE11

Question

I am getting the error "Promise is Undefined" in IE11 in my react app. When I am using Worker in my code

const worker = new Worker('./worker.ts')
console.log('worker' , worker);

When I check logs in Chrome and IE 11 Chrome returns worker onMessage as function whereas IE 11 returns null and I also see message "Permission denied". I also gets this error in IE 11 "Promise is Undefined".

I have imported import 'babel-polyfill' in the beginning of the file. All other Promises are working fine except this Worker.

How can I fix this?

Answer 1

React may not be compatible right away with IE,

From the official documentation:

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.

We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page. You're on your own if you choose to take this path.

---

To make your application work on IE (11 or 9) you will have to install React-app-polyfill:

https://www.npmjs.com/package/react-app-polyfill

Features:

Each polyfill ensures the following language features are present:

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

Usage

First, install the package using Yarn or npm:

npm install react-app-polyfill

Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

---

You can also configure your manifest to handle different browsers, using the following doc: https://github.com/browserslist/browserslist

example:

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

Answer 2

Fixed it by adding import 'babel-polyfill' at the top of the worker.ts.

Note: I have already imported babel-polyfill in index.js. But for worker i had to add it again.