Create-react-app: Are not all ES6 features polyfilled?

[Matthijn]

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.

[gaearon]

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?

[Matthijn]

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

Thanks a bunch!

[gaearon]

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

[Timer]

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).

[gaearon]

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

[viankakrisna]

If https://github.com/facebookincubator/create-react-app/pull/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? 😄

[meooxx]

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

[Timer]

@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.

[meooxx]

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

[Timer]

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

[meooxx]

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

[meooxx]

@Timer you are right . my mistakes

[qbolec]

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');

[brandonburkett]

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

[Timer]

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

[gaearon]

Documented in https://github.com/facebookincubator/create-react-app/commit/419e4d8f57611443103516b9c5e23487c5f33a80.

[selrond]

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

• create-react-app/create.js
• useBuiltIns: 'entry'

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";

[selrond]

@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