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/

[gaearon]

Please provide an example reproducing the problem. Babel polyfill is huge and I don't recommend using it. Instead I would recommend figuring out which ES6 runtime features you use, and picking polyfills just for them.

[jotto]

Please provide an example reproducing the problem.

Sorry about that - CRE works just fine in IE11 and most browsers as far as I can tell, but here are features I used that broke it:

• IE11
  • Array.prototype.findIndex
  • Array.prototype.find
  • ... spread operator
• older than IE11 (not critical)
  • new Map

Babel polyfill is huge

Yes, I didn't realize how relatively big it was: 56% increase (from 48kb to 75kb) - thank you npm run build payload delta for the info.

Now I want to find a way to generate a compatibility table of features I'm using so I can either remove them or add specific polyfills (as opposed to waiting for error events in my error logger)

[gaearon]

but here are features I used that broke it:

We probably need to explain that somewhere.. Create React App does not polyfill ES6 runtime features. It only gives you the syntax.

The idea is that you yourself should decide how much of runtime ES6 features you want to use, and polyfill them yourself. But we don't document that well.

As for spread operator, can you provide a specific example when it breaks? As long as it's used on arrays, it should work fine in ES5 environments.

[lsps9150414]

@gaearon

As for spread operator, can you provide a specific example when it breaks? As long as it's used on arrays, it should work fine in ES5 environments.

I'm using Create React App with react-native-web. The following code(which is inside a 3rd party package i'm using in my project) causes the error You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (17:2)

const propTypes = {
  ...formPropTypes,
};

So how can I add support for using spread operator in objects?

[gaearon]

This is not related to this thread. The syntax is supported in Create React App just fine.

However it won't work inside a third party package. Third party packages are expected to be written (or compiled down to) ES5. This may change in the future but we won't be processing third party modules with Babel because it is extremely slow and sometimes breaks them.

[themre]

no, I agree that we shouldn't include any babel for this kind of things. I think we should close this and update the User Guide how to handle various ES6 syntax (importing polyfill js, various ES6 shims or custom handling - look code below).

code for handling symbols:

<script>
    function symbolPolyfill() {
        var i = 0
        function polyfill(arg) {
            return arg || ('Symbol_' + (i++));
        }
        return polyfill;
    }
    if (!window.Symbol) {
        window.Symbol = symbolPolyfill();
    }
</script>

[sjmueller]

@Gearon, you mentioned above:

we won't be processing third party modules with Babel because it is extremely slow and sometimes breaks them

What do you recommend for the react-native excosystem, which usually relies on babel for compilation? It's really easy to start a project using create-react-app with react-native-web and start working with the built-in components like ListView, Image, View, Text, etc. However, when installing most external 3rd party components, the app blows up with Unexpected Token because it did not get transpiled. A simple example is react-native-invertible-scroll-vew. Bringing those files into the app manually will allow everything to transpile as expected, but of course this is not a great solution.

Would hate to need to run the eject just for this..

[gaearon]

What do you recommend for the react-native excosystem, which usually relies on babel for compilation?

Sorry, I just don't have a good solution for this. This project will prioritize the needs of web users so you either need to eject or persuade maintainers of those projects to ship ES5.

[gaearon]

Closing in favor of #969: we need to document available polyfills.