Lazy load a module using React lazy?

Question

Is it possible to load a heavy module using React.lazy?

I have a very heavy raw file parsed as string (around 10 mb) and I would like to lazy load it.

After trying:

const Module = React.lazy(() =>
  import("./heavyModule").then((heavyModule) => {
    return (
      <Suspense fallback={null}>
        <SomeComponent src={heavyModule.value} />
      </Suspense>
    );
  })
);

Im getting the following error:

lazy: Expected the result of a dynamic $csbImport() call. Instead received: [object Object]

Demo

Answer 1

According to you the heavyModule is not a React component

I have a very heavy raw file parsed as string (around 10 mb) and I would like to lazy load it

So you cannot use React.lazy(). Instead i would recommend to import the raw file only where you require it and then render that particular component lazily.

You can try this method :

useEffect(()=> {
 import('./heavyModule').then(data=> {
  // your code
 },[])