Issues with async resolve

[mschipperheyn]

I tried out the async resolve on a React Universally project and I ran into a lot of nasty little issues that were hard to debug. I'm still not sure what exactly was going wrong. And I would like to find out how to avoid this

The idea was basically to reduce the size of the initial loaded component and take advantage of code splitting by using

export default asyncComponent({
  // include home and about route in same chunk e.g main
  resolve: () =>
    new Promise(resolve =>
      require.ensure(
        [],
        (require) => {
          resolve(require('./AdminRoute'));
        },
        'admin',
      ),
    ),
  LoadingComponent: () => <Loading />,
});

instead of

export default asyncComponent({
  resolve: () => System.import('./AdminRoute'),
  LoadingComponent: () => <Loading />,
});

However, I ran into issues like loading a location and then navigating to a another location and getting errors like this:

which translates to: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This only happened on production.

I initially thought this was due to caching since we are using CloudFlare on the front end, but I added some rules there to prevent caching of /index.html, and I still had the issues.

So, in the end I resorted to going back to big fat deployment file since the pressure was on to deliver. But I would really like to understand how to deal with chunking properly so these errors don't occur and if they do are easier to debug.

[baldurh]

We just had the exact same experience! Also code splitting routes. Only happens on production with a similar setup. We had to back out as well. This was our second attempt at this after having a similar experience with faceyspacey/react-universal-component

Our error was: Cannot read property 'call' of undefined

[baldurh]

OK so our problem was that the webpack boilerplate chunk hash was not being updated when the chunk contents changed. We were using webpack-md5-hash which is being used in react-universally. See this issue for details: https://github.com/erm0l0v/webpack-md5-hash/issues/9 Also: https://github.com/webpack/webpack/issues/1856

We discovered that people were getting two versions of the same file. When we purged the cache on both fastly and cloudflare everything went back to normal.

We removed webpack-md5-hash from our project and using HashedModuleIdsPlugin and ChunkManifestWebpackPlugin and did a similiar thing as found here: https://github.com/ctrlplusb/react-universally/pull/472

See webpack’s caching guide here: https://webpack.js.org/guides/caching/

Hope this helps somebody 🙈