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.