React preloading components with Lazy + Suspense

This is incredibly easy to do, I think there is a misunderstanding about what lazy() and Suspense are doing under the hood.

The only expectation that React.lazy() has is that it takes a function that returns a Promise that resolves with a default component.

React.lazy(() => Promise<{default: MyComponent}>)

So if you want to preload, all you have to do is execute the promise yourself ahead of time.

// So change this, which will NOT preload
import React from 'react';
const MyLazyComp = React.lazy(() => import('./path/to/component'));

/*********************************************/

// To this, which WILL preload
import React from 'react';

// kicks off immediately when the current file is imported
const componentPromise = import('./path/to/component');

// by the time this gets rendered, your component is probably already loaded
// Suspense still works exactly the same with this.
const MyLazyComp = React.lazy(() => componentPromise);

The fact that this is a known signature makes it for useful for all sorts of other situations. For instance, I have a bunch of components that rely on the google maps api being dynamically loaded, I was able to create a function that loads the google maps api and then imports the component. I won't detail the internals of this example since it's a tangent, but the point is I made myself a function that does a bunch of async stuff and then returns a Promise with an object of {default: Component}.

import React from 'react';
const MyLazyComp = React.lazy(() => importMapsComponent('./path/to/comp'));

Not sure how much help this will be, but here is a code sandbox that works (Demo gets loaded by componentDidMount). It is a considerably simplified version of your code using create-react-app for the config. Perhaps you can take this as a starting point and morph it gradually closer to your app to see what causes the dynamic import to no longer work as desired.