canjs / can-reflect

Operate on unknown data types
https://canjs.com/doc/can-reflect.html
MIT License
4 stars 4 forks source link

can-reflect.each should work with native Maps when core-js is loaded #152

Closed m-mujica closed 5 years ago

m-mujica commented 5 years ago

In IE11, if core-js is loaded, the Native Map gets some weird looking keys that can-reflect.each iterates on causing some errors across my app.

Object.keys( new Map() );  -> ['_t', '_i', '_f', '_l', '_s']

Ideally, can-reflect.each should not iterate over this keys.

justinbmeyer commented 5 years ago

@m-mujica what is core-js ... a babel polyfill? Where could one get it?

m-mujica commented 5 years ago

@justinbmeyer we get it through the babel-polyfill.

https://github.com/babel/babel/blob/master/packages/babel-polyfill/src/index.js#L15

phillipskevin commented 5 years ago

core-js is the polyfill we recommend in https://canjs.com/doc/guides/setup.html#IE11Support. You can get it from npm directly. core-js/web is the module babel-polyfill loads.

phillipskevin commented 5 years ago

core-js/web alone doesn't seem to cause this problem, but babel-polyfill does. Still looking into this.

phillipskevin commented 5 years ago

These keys (['_t', '_i', '_f', '_l', '_s']) are the "symbols" created by our polyfill and assigned here: https://github.com/canjs/can-reflect/blob/07b65f19893d5b9ebe24b87574661c6ae4fa602f/types/map.js#L24-L30

I'm not exactly sure what the problem is yet, but it has something to do with how the core-js Symbol polyfill creates Symbols that are not type "symbol". We have a few checks for Symbol support that just check if Symbol and Symbol.for exist, but we also check for the type in places like here:

https://github.com/canjs/can-reflect/blob/07b65f19893d5b9ebe24b87574661c6ae4fa602f/reflections/get-set/get-set.js#L34

phillipskevin commented 5 years ago

After looking at this with fresh eyes, this is actually caused by core-js, but has been fixed in the 3.0 beta releases:

https://github.com/zloirock/core-js/commit/91e00774e6190abcbd48cbd55d4058c4ce0d31f7#diff-88489a3c1bf8dcb565c6550222bd7703L32

m-mujica commented 5 years ago

I ended up just replacing babel-polyfill with:

import ‘core-js/es6/symbol’;
import ‘regenerator-runtime/runtime'

since I only needed the Symbol polyfill and the regenerator for the async/await stuff... Now the app loads fine.

phillipskevin commented 5 years ago

@m-mujica fixed this by replacing babel-polyfill with:

import "core-js/es6/symbol";
import "regenerator-runtime/runtime";

We also fixed how Symbols are handled:

Going to close this for now. If someone else runs into a case where babel-polyfill does not work, we can re-open.