Core-js: Cannot convert object to primitive value with core-js 3.1.3 + webpack

[PikachuEXE]

Env

• webpack 4.32.2
• babel-loader 8.0.6
• core-js 3.1.3

Not sure what else should be added
Will update this list if more entries are needed

Description

I already applied patch from https://github.com/rails/webpacker/pull/2031 to fix #514
But now I got this error
Below are screenshots to the backtrace

[jacobp100]

I've narrowed it down to this statement being broken,

$defineProperty({}, Symbol.toStringTag, { value: 'test' })

As you can see in the above code, webpack seems to add this to every harmony module

[zloirock]

In which engine? Could you add a reproducible example?

[jacobp100]

IE11. If you run my exact example in IE11, it throws an exception

[zloirock]

@jacobp100 you really think that this example is not tested and still no one run webpack + babel-loader + core-js@3 where it will be added in modules by default? Seems the problem how it's used - configs, possible conflicts with other polyfills, etc.

[PikachuEXE]

I can see the backtrace as:

1. Webpack require => Define property with defineProperty on Symbol.toStringTag

// define __esModule on exports
__webpack_require__.r = function(exports) {
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
};
````

#### 2. Calling core-js symbol polyfill of `defineProperty` in `core-js/modules/es.symbol.js`
Key statement is `key = toPrimitive(key, true)`
```js
var $defineProperty = function defineProperty(it, key, D) {
  if (it === ObjectPrototype) $defineProperty(ObjectPrototypeSymbols, key, D);
  anObject(it);
  key = toPrimitive(key, true);
  anObject(D);
  if (has(AllSymbols, key)) {
    if (!D.enumerable) {
      if (!has(it, HIDDEN)) nativeDefineProperty(it, HIDDEN, createPropertyDescriptor(1, {}));
      it[HIDDEN][key] = true;
    } else {
      if (has(it, HIDDEN) && it[HIDDEN][key]) it[HIDDEN][key] = false;
      D = nativeObjectCreate(D, { enumerable: createPropertyDescriptor(0, false) });
    } return setSymbolDescriptor(it, key, D);
  } return nativeDefineProperty(it, key, D);
};

3. Calling toPrimitive in core-js/internals/to-primitive.js

var isObject = require('../internals/is-object');

// 7.1.1 ToPrimitive(input [, PreferredType])
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
// and the second argument - flag - preferred type is a string
module.exports = function (it, S) {
  if (!isObject(it)) return it;
  var fn, val;
  if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
  if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;
  if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
  throw TypeError("Can't convert object to primitive value");
};

That means value referenced by Symbol.toStringTag is incompatible with ToPrimitive

Here is a bit of console debugging in IE 11:

If I remove import "core-js/modules/es.symbol" the error is gone
But I have no idea what else will be broken

[PikachuEXE]

It seems that jscomp_symbol_xxxx (the polyfill) is from Google Maps JS file
https://maps.googleapis.com/maps/api/js?v=3&libraries=places

Loading it after the file containing core-js symbol polyfill would solve this issue

[jacobp100]

Thanks @PikachuEXE - we had exactly the same issue with Google Maps, and managed to fix it with your solution 😀

[Cobertos]

This also seems to be an issue with Google's Recaptcha API. Removing it from the project or making it load after your packed bundle fixes IE11. The file in question that I had to move was //www.google.com/recaptcha/api.js?h1=en&render=explicit.

The specific IE11 error I was getting was:

SCRIPT5005: String expected in the regenerator-runtime library that seems to extend from this Symbol polyfill conflict.

Kind of annoying...

[firestar300]

@Cobertos Did you find a fix ?

[Cobertos]

@firestar300 Yeah, you have to make sure recaptcha loads after any other script that messes with Symbol, including polyfills or webpacked bundles. Moving it to just before the end of the <body> tag fixed it for our apps.

[firestar300]

Thanks :)

[greatwitenorth]

I'm having the exact same issue as @PikachuEXE. Same stack trace and everything, but I'm not using Google maps or recaptcha on my page. Any other ideas as to why this error might be happening in ie11?

[erictonussi]

I reverted to core-js 2.5.7 and all the module.export errors stopped displaying.

[judygab]

It seems that jscomp_symbol_xxxx (the polyfill) is from Google Maps JS file
https://maps.googleapis.com/maps/api/js?v=3&libraries=places

Loading it after the file containing core-js symbol polyfill would solve this issue

@PikachuEXE what do you mean by file containing core-js symbol polyfil?

[PikachuEXE]

Any file that import core-js/features/symbol or other polyfill requiring that module
@judygab