Angular 12, IE 11, @@toPrimitive must return a primitive value

Question

After a fresh install of npm packages (deleted node_modules and package.lock.json) polyfills-es5 file started having additional code to define _toPrimitive function

And when I load the app in IE I get @@toPrimitive must return a primitive value.

I debugged the IE and found that input = [Symbol [Object]] (typeof input === 'object) while in Chrome it is just a 'string'. debugging more I figured out the caller function

So and as I checked in chrome it is just a string:

And in IE it is of type object:

I was able to find out that this function is added by babel. But I do not understand why it eventually started to be a case. Please, help me to understand what causes this code to be added like that. What dependency I need to rollback or maybe something change anywhere.

If I revert package.lock.json and reinstall node_modules this issue doesn't occur

Answer 1

The "problem" is hiding in newer version of @babel/helpers. Since version 7.20.5 the defineProperties function started to call toPropertyKey. So this combination started to be included into the new output bundles code of this function.

The problem is solvable by adding @babel/helpers directly in package.json and specifying older version. I specified 7.14.0

"@babel/helpers": "~7.14.0"

So it should start working as it was before.

It doesn't mean that root problem is gone, the code still contains a Symbol which cannot be converted to string primitive. I put logging to this 'broken' code and logged each descriptor.key in IE:

There are 2 fields which are setup as keys for certain object. This object is from zoneJS infrastructure. I cannot tell right now if it may cause any problem. But this is how our code was working before. But I am still wondering why these 2 properties are like that...