Core-js: Conflict with Google Maps JavaScript SDK in IE 11

[AlexWayfer]

In project I have:

> yarn list --pattern 'core-js'
yarn list v1.17.3
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 0.54s

In Internet Explorer 11 I get:

This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.

Script with import 'core-js/modules/es.array.from' is loading before Google Maps JavaScript SDK.

[zloirock]

core-js Array.from perfectly support iterables, so seems the problem not in core-js.

[AlexWayfer]

core-js Array.from perfectly support iterables, so seems the problem not in core-js.

I've commented the line with import and the error has gone.

[zloirock]

Without a reproducible example or at least a stack trace I can't say anything. Most likely you load an incorrect polyfill before core-js.

[AlexWayfer]

or at least a stack trace

This error from Google SDK, I guess. And I don't see any stack trace.

Without a reproducible example

I'll try to create it.

[zloirock]

It's not the first issue where Google Maps trying to polyfill something and break core-js.

[AlexWayfer]

It's not the first issue where Google Maps trying to polyfill something and break core-js.

I saw it, but I saw resolutions only like "load core-js before Google Maps", but it's already so in our project.

[zloirock]

Yep, seems it's something new. It looks like Google Maps try to check the support of iterables inArray.from, but uses own internal Symbol.iterator polyfill (own Google Maps Symbol polyfill also was a reason of previous issues).

[AlexWayfer]

Without a reproducible example or at least a stack trace I can't say anything. Most likely you load an incorrect polyfill before core-js.

I found the breaking commit in our project.

It's more about HTML and CSS, but there are some new JS code:

import 'core-js/modules/web.url-search-params';

Can it broke?

[AlexWayfer]

Oh, no, this is getting another error, my bad. Requests like:

our.host/current_page/undefinedpb=!1m5!1m4!1i6!2i37!3i19!4i256!2m3!1e0!2sm!3i479188624!3m9!2sru!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&key=%GOOGLE_KEY%&token=129221

The main our problem. I found another conflict, I guess. I've created a separate issue: #619

[zloirock]

Can it broke?

Unlikely.

[AlexWayfer]

I've updated the gist for neighboring issue: https://gist.github.com/AlexWayfer/5cb15784af3761aa75ce71736a08f9ec

You can uncomment the code with Array.from — it'll work in IE11 (cause of polyfill from Google Maps JS SDK, I guess). But after uncommenting import 'core-js/modules/es.array.from' you'll see error described above.

[zloirock]

Seems I was right here. It's a Google Maps, not core-js, issue.

[AlexWayfer]

Seems I was right here. It's a Google Maps, not core-js, issue.

And the solution looks like adding import 'core-js/modules/es.symbol.iterator' before es.array.from.

Thank you.

[jyzbamboo]

Seems I was right here. It's a Google Maps, not core-js, issue.

And the solution looks like adding import 'core-js/modules/es.symbol.iterator' before es.array.from.

Thank you.

Thank you. I fixed the error as well.

import 'core-js/es6/symbol';
import 'core-js/es6/array';