Create-react-app: Question: Configuring ES version that Babel outputs

Created on 21 Feb 2017 · 9Comments · Source: facebook/create-react-app

I was wondering how to configure Babel in the non-ejected package.json to work with older browsers? I'm seeing compatibility issues with CasperJS with a PhantomJS backend and also IE 11. Also I have been looking at the ejected webpack configuration files, is there somewhere within these files I should look to configure the output JavaScript version?

I'm somewhat new to a lot of the JavaScript build tools, so general advice would be helpful. I'd like to be able to use the react-scripts without ejecting as much as possible.

Source

lnunno

Most helpful comment

One easy way to deal with this, is to polyfill everything if they run an old browser. Add this line inside your <head>:

<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>

Sure, it will be slower for old browsers, but as I said, this is super easy to do and has no impact on modern browsers, since the nomodule attribute makes the modern browser to skip that script.

Jorjon on 17 Aug 2018

🎉6

All 9 comments

Your program should be compiled into JavaScript that is compatible with IE9+ (same as React). If there are issues, they're most likely bugs or forgotten polyfills in your code.
Unfortunately, we don't let you adjust this without ejecting.

Could you please provide more detail as to what the issue is?

Timer on 21 Feb 2017

One common point of confusion is when people use methods like Array.from() without realizing they need polyfills. We only polyfill very little: fetch, Promise, and Object.assign.

A potential pitfall here is that some Babel syntax actually requires polyfills. For example if you spread [...something] and something is not an array, it will trigger the code path that requires Symbol. So you need to be a bit more careful with such features, or include a Symbol polyfill to be safe.

gaearon on 21 Feb 2017

Thanks for the input guys.

So I tried just the out of the box create-react-app archetype that gets generated. That works with IE9+, however when I added react-bootstrap as is mentioned in the docs the React components no longer render even in IE11. @gaearon do you think I need additional polyfills that maybe react-bootstrap uses?

I guess a point of confusion is what is the breaking point where I can make my app incompatible with older browsers, if I include any dependency that uses a ES6 feature that isn't polyfilled by Babel, I'm assuming that breaks my backwards compatibility?

lnunno on 21 Feb 2017

So just an update in case someone stumbles upon this later. I ran

$ npm install --save babel-polyfill

And then added

import 'babel-polyfill';

To the top of my index.js file. This seems to work for IE9+.

lnunno on 21 Feb 2017

@lnunno importing babel-polyfill is discouraged because it is huge, you should try to only polyfill what you need.

if I include any dependency that uses a ES6 feature that isn't polyfilled by Babel, I'm assuming that breaks my backwards compatibility?

Yes. But you can include these polyfills on a per-use basis.

Timer on 21 Feb 2017

Yea, importing babel-polyfill is pretty bad. I suggest importing individual polyfills.

when I added react-bootstrap as is mentioned in the docs the React components no longer render even in IE11. @gaearon do you think I need additional polyfills that maybe react-bootstrap uses?

You should file an issue with react-bootstrap to either not depend on extra polyfills, or document the required polyfills. We don't support this package ourselves.

gaearon on 21 Feb 2017

@gaearon @Timer Do you have an example of just adding the Symbol polyfill? I think that was the only thing I needed. I had code like the following

// See: https://react-bootstrap.github.io/components.html?#forms-controls
function FieldGroup({ id, label, help, ...props }) {
    return (
        <FormGroup controlId={id}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl {...props} />
            {help && <HelpBlock>{help}</HelpBlock>}
        </FormGroup>
    );
}

Which I'm assuming triggers the Symbol code path and then includes ES6 code into my bundle.

lnunno on 21 Feb 2017

This code shouldn't need Symbols, no. This is object spread ({...stuff}), not array spread ([...stuff]). Please raise an issue with React Bootstrap.

To add a Symbol polyfill alone, you can do:

import 'core-js/es6/symbol';

assuming you ran npm i --save core-js before.

gaearon on 21 Feb 2017

👍2

One easy way to deal with this, is to polyfill everything if they run an old browser. Add this line inside your <head>:

<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>

Sure, it will be slower for old browsers, but as I said, this is super easy to do and has no impact on modern browsers, since the nomodule attribute makes the modern browser to skip that script.

Jorjon on 17 Aug 2018

🎉6

Was this page helpful?

0 / 5 - 0 ratings