IE 11 crash related to symbols in combination with core-js/stable and @babel/runtime-corejs3

[mlandalv]

This may be related to #705 and #514. However, I haven't managed to get it to work based on the tips in 514.

Anyways, the error seems to be a result of combining core-js/stable and @babel/runtime-corejs3 and in my case ImmutableJS (v3.8.2).

I use lots of npm packages and some of them are built with @babel/plugin-transform-runtime with the corejs: 3 option. That results in code like import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";.

That specific import, in combination with immutablejs v3.8.2 in my case results in symbol crash in IE 11.

Basically what happens which results in IE 11 crashing:

1. import 'core-js/stable'; at the top of my entry file
2. Other imports, one of them happen to have import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3. import Immutable from 'immutable';

I've created a super simple repo where the error can be reproduced.

This results in a crash in IE 11.

1. import 'core-js/stable';
2. import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3. import Immutable from 'immutable';

This does not result in a crash in IE 11.

1. import 'core-js/stable';
2. import Immutable from 'immutable';

This doesn't result in a crash either:

1. import 'core-js/stable';
2. import Immutable from 'immutable';
3. import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";

Since the order of the imports matter, it seems to me that core-js and core-js-pure somehow conflicts with one another.

[zloirock]

At this moment, I haven't access to IE11. What's the error, stack trace?

[mlandalv]

The error occurs in internal-state.js#L20. I'll attach a few screenshots.

[zloirock]

Are you sure that core-js(-pure) is not transpiled? Since it looks like an equal of #514.

[mlandalv]

I agree it looks very much like #514. However, I'm pretty sure nothing in node_modules is transpiled. This is the webpack babel rule:

The picture below contains the content from node_modules/core-js/internals/internal-state.js and the pasted white content is from the webpack bundle. (I added a let statement at the very top to see whether or not it gets transpiled.)

As you can see it's not transpiled. However, if I change the webpack rule to transpile everything the bundled content changes; still the same error in IE11 though.

[zloirock]

Could you check the last results of it, isObject(it) and get(it).type in getterFor?

[mlandalv]

get(it).type is undefined.

I will have limited access to a computer the coming days but I'll try to answer as fast as I can.

[zackphilipps]

@zloirock I'm running core-js 3.6.4 and still getting this error. IE11 is complaining because there is no try...catch around this exception. https://docs.microsoft.com/en-us/scripting/javascript/misc/exception-thrown-and-not-caught?redirectedfrom=MSDN

[zackphilipps]

@zloirock here's me console logging after inserting a breakpoint.

[zackphilipps]

I added the try...catch and a console.error and now I'm getting Incompatible receiver, Symbol required and Unable to get property 'tag' of undefined or null reference in es.symbol.js line 178.

[zackphilipps]

I fixed my issue by updating all dependencies. There were a number of babel updates as well as styled-components (styled-components seemed to be the package causing the most grief.)