Are not all ES6 features polyfilled?

In the documents on the section of polyfills there is the following line: "In addition to ES6 syntax features, it also supports:"

Which makes me presume all ES6 features are supported (and then some). However, when using for-of it seems to fail in IE11 which has no support for for-of.

Below the failure.

Now for that example it's a trivial fix, but the sentence in the documentation makes me think it should be supported. Can't seem to add support without ejecting, which I prefer not to for this simple thing. But still.

I've updated to react-scripts 1.0.10, but that does not seem to make a difference.

It says:

In addition to ES6 syntax features, it also supports [...]

(Emphasis added)

So it wasn't about runtime ES6 feature, but about syntax.

The paragraph below mentions polyfills:

Note that the project only includes a few ES6 polyfills:

[...]

If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.

Hope this explains it! You probably missed this part.

Can't seem to add support without ejecting, which I prefer not to for this simple thing. But still.

You don't need to eject. Just add a polyfill like you normally would, in src/index.js before other imports. For example

npm install --save core-js

import 'core-js/es6/symbol';

Does this help?

It does indeed! I thought "for of" was syntactic sugar. So perhaps that's where the confusion came from.

Thanks a bunch!

Yea, syntax that depends on runtime features is where it gets tricky. Thanks for highlighting this. We should probably mention such caveats.

Maybe it's worth including a Symbol polyfill? IIRC it'll be needed for React 16 and I would consider adding it simply because it's used by for-of (which is syntax).

It’s not required by React 16, no (but Map, and Set are).
That said I do want to include Symbol soon.

If #2358 merged, maybe we don't have to curate the polyfills anymore? We can statically analyze it and ship what they need. IMO leaving polyfills to the user causes an issue like this.

I think adding a polyfill counts as "config" on the user space, so, can we add this magic? 😄

@gaearon

@gaearon how to config?(like object-rest-spread, async-generator ... ) i have failed many times

@meooxx

@meooxx I'm not sure what you're asking? All of these things work out of the box -- you do not need to think about them.

@Timer

@Timer .. Note that the project only includes a few ES6 polyfills:

ES6 polyfills enable new language features, not syntax features.
Async functions and object rest spread of syntax features. Go ahead an try 'em!

@Timer

@Timer but it throws error " need an appropriate loader to handle this file type "

@Timer

@Timer you are right . my mistakes

I hope that it will help some future people in a situation like mine: after upgrading from jest 17.0.3 to jest 20.0.4 the test started to fail because of undefined Object.values. It was puzzling because other stuff like Promises worked just fine. The long story short:

the old version of jest automatically imported babel-polyfill (conditionally on it being installed for a particular project) which added support for Object.values
polyfilled Object.values.toString returns "[function values() { [native code] }" which adds to the confusion
config/polyfills.js which comes with create-react-app polifills some features, in particular Promises, but not Object.values
new version of jest does not automatically import babel-pollyfill
so the new syntax (as opposed to new functions) will work with new jest
promises will work with new jest thanks to config/polyfills.js
Object.values will not work :)

A solution is to simply replace the whole content of config/pollyfills.js with single line

require('babel-polyfill');

Are Map and Set polyfilled? I could not tell via the documentation (although it did specifically mention Symbol needed a polyfill).

Nope! That is documented in the React documentation, but feel free to send a PR adding it to ours too.

Documented in 419e4d8.

@qbolec

This is why @babel/polyfill (@qbolec's solution) works:

With useBuiltIns: 'entry' option used in create-react-app's babel-preset-env config, Babel works like this:

IN

import "@babel/polyfill";

OUT (different based on environment)

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

@gaearon

@gaearon shouldn't this @babel/polyfill-way be included in the docs as an example? It's even mentioned in the source create-react-app/create.js

Navigation Menu

Repository navigation

Are not all ES6 features polyfilled? #2765

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Are not all ES6 features polyfilled? #2765

Description

Activity

gaearon commented on Jul 11, 2017

mdijkstra-oss commented on Jul 11, 2017

gaearon commented on Jul 12, 2017

Timer commented on Jul 12, 2017

gaearon commented on Jul 12, 2017

viankakrisna commented on Jul 13, 2017

meooxx commented on Jul 15, 2017

Timer commented on Jul 15, 2017

meooxx commented on Jul 15, 2017

Timer commented on Jul 15, 2017

meooxx commented on Jul 15, 2017

meooxx commented on Jul 15, 2017

qbolec commented on Aug 16, 2017

brandonburkett commented on Dec 5, 2017

Timer commented on Dec 5, 2017

gaearon commented on Jan 8, 2018

selrond commented on Jul 13, 2018

selrond commented on Jul 13, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions