Version 10.0.0 breaks in Chrome 59 (or lower)

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.

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

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