Is there a option to build a ES5 React App?

[dsoldera]

Hello there.

This App is awesome, but I´ve just wondereing if I can build a React App with ES5? If is there a support to it?

Thanks for the enlightening

[gaearon]

Hi!

I'm not sure I fully understand the question.

The result code is ES5. When you run npm run build, Babel compiles ES6 and JSX into ES5 and that's what you'll serve to the users.

If you want to, you can also write the code in ES5 since it's just a subset of ES6. I don't see a good reason for doing it though.

I hope this helps!

[themre]

perhaps he ment for CRA to work in some "not-so-ES6-compliant" browsers to work, e.g. IE11. for example IE11 nags about Symbols undefined and other stuff. perhaps quick workaround is to include es-shim scripts for those who want this?

[kasperpeulen]

@themre If create-react-app doesn't work in IE11, I think this is a bug.

[themre]

there was some discussion around this topic and I think CRA was meant to provide easy-to-start tool for React. However I think now CRA has become so widespread that a lot of the community expects to work in all major browsers which is not the case. Perhaps there should be some guidance how to step in such cases.

[kasperpeulen]

Can you show some example code where CRA doesn't work in IE11?

Are you talking about ES6 features that are not transpiled by babel, but work natively in chrome? If so, that has not so much to do with CRA, but more with not knowing which ES6 features are transpiled and which are only working natively.

[themre]

This is done with CRA: apps.sentinel-hub.com/sentinel-playground/. This is only issue with native support of ES6 features (eg. Symbol).

[gaearon]

However I think now CRA has become so widespread that a lot of the community expects to work in all major browsers which is not the case.

CRA is expected to work in all major browsers including and newer than IE9.

If it doesn't, file issues 😉. We can't guess that something is wrong if people just think "oh it's not working" and don't file issues.

Please create a specific issue describing the problem you see, affected browsers, and the source code reproducing it. Thanks.

[gaearon]

FWIW I agree there should be a docs section explaining that only syntax is compiled, and if you choose to use Symbols or other runtime ES6 features, it is up to you to polyfill them.

Maybe we should include a polyfill.io link to HTML to gently explain this without forcing everyone to use giant polyfills.

[themre]

A lot of this is already discussed here: #269

[gaearon]

I think CRA doesn't force anybody to use Symbols. AFAIK examples in #269 only apply when you spread over something that isn't an array. I agree it's grey territory if you haven't looked at what spread compiles to.

Would you like to make a PR adding ES6 polyfills from polyfills.io to HTML file? It seems like this would be the best compromise because people who know which features they're using can just remove it.

[themre]

Yeah, it isn't CRAs fault that we all want to use latest JS syntax and stuff. I found that adding this 2 lines into HTML saves all my troubles:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://wzrd.in/standalone/es7-shim@latest"></script>

So maybe this is up to each individual if he wants to use this 2 scripts or not, but I don't think they provide too much garbage (correct me if I'm wrong). Writing nicer code is better than keeping your bundle extra small just for handling browsers that will be or they are already out of date.
So perhaps updating README.md with some warnings and instructions with some guidelines how to handle never JS syntax would probably be enough.

[gaearon]

Yeah, it isn't CRAs fault that we all want to use latest JS syntax and stuff.

As I mentioned above, the syntax should work. If it doesn't, that's a bug. But there are special cases (like iterating over a non-array) that can't possibly work without Symbols. Maybe we should just give up and bundle Symbol polyfill by default.

[jotto]

For what it's worth, the following has solved my IE11 problems:

npm install --save-dev babel-polyfill

then require it at the top of src/index.js

import 'babel-polyfill';

http://babeljs.io/docs/usage/polyfill/