Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Symbol' is undefined problem in ie11 #7597

Open
lykhatskyi opened this issue Mar 19, 2018 · 17 comments

Comments

Projects
None yet
@lykhatskyi
Copy link

commented Mar 19, 2018

if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);

getting an error in ie11,
Can we change this check?
A lot of clients are using different js validators that decrease app rating because of this error
image

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Mar 19, 2018

Hey @lykhatskyi! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@loganfsmyth

This comment has been minimized.

Copy link
Member

commented Mar 19, 2018

Note the builtin/ in the path of that file. That means you're passing the useBuiltins option. Specifically

When enabled, the transform will use helpers that do not use any polyfills from core-js.

Given that, it would be up to you to ensure that any necessary ES6 polyfills are available, or else avoid using syntax in Babel that would depend on ES6 functionality that hasn't been polyfilled.

@mrchief

This comment has been minimized.

Copy link

commented Apr 17, 2018

@loganfsmyth That sounds promising but doesn't solve the problem.

image

@csergiu

This comment has been minimized.

Copy link

commented May 10, 2018

avoid using syntax in Babel that would depend on ES6 functionality that hasn't been polyfilled.

then what's the purpose of Babel?

@mrchief

This comment has been minimized.

Copy link

commented May 10, 2018

then what's the purpose of Babel?

Babel will do the polyfilling for you. But if you say useBuiltins: true, and try to use modern ES6 features in an archaic browser like Internet Explorer, then you'll run into issues. You'll be fine in Chrome, Safari, FF for most part but again, you need to ensure you're not using any new features that are not adopted by browsers yet.

As far as my comment above goes, I solved it by using babel-polyfill. I was using polyfill.io which was causing the Symbol related issues. As soon as I switched to babel-polyfill, all of them went away.

@ljharb

This comment has been minimized.

Copy link
Member

commented Oct 30, 2018

I don't see why polyfilling Symbol should be required - it's not actually shimmable (core-js's shim is actually a sham, because typeof can't be polyfilled).

Most of the babel helpers have guards ensuring Symbol exists; why does iterableToArray lack one?

@loganfsmyth

This comment has been minimized.

Copy link
Member

commented Oct 31, 2018

That's totally fair. If someone wants to submit a PR I'd be happy to accept it.

@ljharb

This comment has been minimized.

Copy link
Member

commented Oct 31, 2018

That’s great; one will be incoming very soon!

sharmilajesupaul added a commit to sharmilajesupaul/babel that referenced this issue Oct 31, 2018

Fixes babel#7597
Ensure that `Symbol` exists and is a function before using it. We ran into an issue with the usage of `Symbol` breaking on ie11 because it is not supported.

sharmilajesupaul added a commit to sharmilajesupaul/babel that referenced this issue Oct 31, 2018

Fixes babel#7597
Ensure that `Symbol` exists and is a function before using it. We ran into an issue with the usage of `Symbol` breaking on ie11 because it is not supported.

sharmilajesupaul added a commit to sharmilajesupaul/babel that referenced this issue Oct 31, 2018

Fixes babel#7597
Ensure that `Symbol` exists and is a function before using it. In `iterableToArray` we update the condition to check for objects that act as arrays such as, objects with the `length` property, Maps, and Sets. This change is being made because we ran into an issue with the usage of `Symbol` breaking on ie11 because it is not supported.

sharmilajesupaul added a commit to sharmilajesupaul/babel that referenced this issue Nov 2, 2018

Fixes babel#7597
Update babel helpers to not require Symbol to exist. We ran into an issue with ie11 where Symbol is not supported. This PR gaurds the usage of Symbol by ensuring that it exists first. There are also changes that allow objects with a length property and array-like objects to work with `iterableToArray`.

sharmilajesupaul added a commit to sharmilajesupaul/babel that referenced this issue Nov 5, 2018

Fixes babel#7597
Update babel helpers to not require Symbol to exist. We ran into an issue with ie11 where Symbol is not supported. This PR gaurds the usage of Symbol by ensuring that it exists first. There are also changes that allow objects with a length property and array-like objects to work with `iterableToArray`.
@kofifus

This comment has been minimized.

Copy link

commented Nov 21, 2018

Stuck with the same issue :(
What is the best way to solve this until above commits become part of the release ?

@timtox

This comment has been minimized.

Copy link

commented Nov 21, 2018

@kofifus All you can do is rely on a workaround. I have the same problem where babel compiles for (const cassette of cassettes) to Symbol.iterator. As long we are waiting for the PR you can write for (let i = 0; i < cassettes.length; i++) which works on IE11. But this is only one example for many ES6 features which could cause a problem.

@ljharb

This comment has been minimized.

Copy link
Member

commented Nov 21, 2018

Our temporary workaround has been to manually patch the file generated pending the PR landing.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Nov 21, 2018

@timtox You can use normal for-of and the assumeArray option of the @babel/plugin-transform-for-of plugin.

@timtox

This comment has been minimized.

Copy link

commented Nov 29, 2018

@nicolo-ribaudo Sorry for late response but thank you for the tip with the babel plugin. Is there a list of ES6 features which are not baked into the babel core and one must use a plugin to transform them properly for older Browsers?

@ljharb

This comment has been minimized.

Copy link
Member

commented Nov 29, 2018

@timtox every single one that adds syntax :-)

@timtox

This comment has been minimized.

Copy link

commented Nov 29, 2018

Thank you :-)

asudoh added a commit to asudoh/carbon-components that referenced this issue Mar 22, 2019

fix(modal): fix JavaScript error in IE11
We hit babel/babel#7597 with our logic turning `NodeList` to an array,
but turned out it's not needed there.

Fixes carbon-design-system#2068.

shixiedesign added a commit to carbon-design-system/carbon that referenced this issue Mar 22, 2019

fix(modal): fix JavaScript error in IE11 (#2183)
We hit babel/babel#7597 with our logic turning `NodeList` to an array,
but turned out it's not needed there.

Fixes #2068. 

Note: merging without reviewing on IE11 because designers are not set up with IE11. Will make an IE11 specific visual pass on all components & website after release.

sodatea added a commit to sodatea/vue-cli that referenced this issue Mar 29, 2019

fix: should not add polyfills from transform-runtime plugin
It is due to a misunderstanding when upgrading babel from 7.0.0-beta.47
to 7.x.
In Vue CLI, usage-based polyfills are **only** added by @babel/preset-env
so that it avoids overheads. `transform-runtime` plugin adds polyfills
regardless of env targets so we must disable its polyfill feature.
Though, there're edge cases where runtime-helpers' polyfill dependency
are not correctly added (babel/babel#7597),
so we also need to whitelist `@babel/runtime` for webpack to transpile.

sodatea added a commit to vuejs/vue-cli that referenced this issue Mar 31, 2019

fix: should not add polyfills from transform-runtime plugin (#3730)
It is due to a misunderstanding when upgrading babel from 7.0.0-beta.47
to 7.x.
In Vue CLI, usage-based polyfills are **only** added by @babel/preset-env
so that it avoids overheads. `transform-runtime` plugin adds polyfills
regardless of env targets so we must disable its polyfill feature.
Though, there're edge cases where runtime-helpers' polyfill dependency
are not correctly added (babel/babel#7597),
so we also need to whitelist `@babel/runtime` for webpack to transpile.

tombye added a commit to alphagov/notifications-admin that referenced this issue Apr 17, 2019

Remove use of spread operator
This is a temporary fix for the fact that the
babel plugin for the spread operator calls a
function called `_iterableToArray` which assumes
the JavaScript runtime supports Symbols.

IE11 doesn't support Symbols so this causes an
error when it runs our JS.

This swaps out use of the spread operator for a
use of
[apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
to unpack the `arguments` object.

Related issue on babel:

babel/babel#7597
@johnnywang

This comment has been minimized.

Copy link

commented Jul 17, 2019

Was this never actually fixed? Started seeing this issue myself in a library that we can't actually run babel-polyfill for so the guard would be nice to have

@MatthewHerbst

This comment has been minimized.

Copy link

commented Jul 17, 2019

@johnnywang it's been stuck in PR: #8947

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.