Version 10.0.0 breaks in Chrome 59 (or lower)

[josephmarkus]

In Chrome version 59 (or lower) react-async version 10.0.0 breaks.

Browser reports Uncaught SyntaxError: Unexpected token ..., which appears to be located in react-sync. Here's the specific line: ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn))

This appears to be due to lack of transpilation from ES6 to ES5 in this particular version of react-async.

Downgrading to version of react-async 9.0.0 fixes the issue.

Although Chrome version 59 is 2.5 years old, there's a significant number of users using it, who reported an issue where application would load a blank screen.

[YarynaBukovynskaHPE]

Edge and IE11 also are broken with a 10.0.0 version. Downgrading to 9.0.0 fixes only Edge. Guys, could you provide transpiling?

[mbark]

We also ran into this problem and fixed it by transpiling our dependencies ourselves.

To build your node_modules you need to have a babel.config.js file and not a .babelrc (more about that in babel's documentation).

Then in your webpack.config.js allow node_modules to be built, point to your config file (and probably turn on caching since build times will increase now that node_modules are built). I've excluded core-js from being built with babel as it shouldn't be transpiled.

{
  test: /\.(js|jsx)$/,
  exclude: /\/node_modules\/core-js\//,
  use: [{
    loader: 'babel-loader',
    options: {
      configFile: './babel.config.js',
      cacheDirectory: true,
    }
  }]
}

As I understand it transpiling node_modules also seems to be the recommended way to solve this problem, see #51 for @ghengeveld's response to a similar problem.

[ghengeveld]

Our build pipeline was overhauled when we switched to TypeScript for v10. Apparently the new setup no longer transpiles object spread props. I'm willing to accept a PR if there's a simple fix, but only for the sake of convenience.

This project targets the latest ECMAScript standard (or whatever TypeScript supports). If you need to target a browser which does not support this, you'll have to handle transpilation yourself. Usually this will automatically be handled by the framework you use (CRA, Next.js, Gatsby). We can't possibly provide pre-transpiled packages for all environments, and we also don't want to cripple the package by targeting the lowest common denominator (whatever that may be).

Thanks for providing that excellent explanation @mbark, would you be willing to add a section about this to the installation docs? The docs are on GitHub too.

[ghengeveld]

Transpiling for legacy browsers is now explained in the docs.

[twgraham]

I wouldn't exactly call Edge a legacy browser though. Also, I don't think that doc will suite everyone - transpiling your entire node_modules folder can be extremely expensive, and also wasteful if react-async is the exception. I would suggest updating it to do what was suggested here.

[mbark]

Maybe both solutions could be documented @twgraham? The solution I suggested was based on the webpack.config.js in create-react-app which switched to transpiling the entire node_modues directory (in this PR).

The additional transpile time from node_modules is also cached (given that you provide cacheDirectory: true) which means that it is only really cold builds that are affected.