Can I use another lazy component as <Suspense /> fallback?

Question

I have an sdk that needs to lazily load a component and its skeleton. So I implemented code like:

const LazySkeleton = React.lazy(() => import('@my-sdk/skeleton'));
const LazyComponent = React.lazy(() => import('@my-sdk/component'));

const skeletonWithFallback = <Suspense fallback={null}>
<LazySkeleton />
</Suspense>

<Suspense fallback={skeletonWithFallback}>
    <LazyComponent />
</Suspense>

But after going online, I received occasional errors:

Minified React error #130

I'm not sure what went wrong and how to fix it.

Can anyone help me with that?

Answer 1

I took a look at the code snippet you shared and spotted the issue that's causing the Minified React error #130. The root of the problem lies in how the lazy components are named and utilized within the JSX.

In JSX, component names must start with a capital letter. This is because React treats components starting with lowercase letters as DOM tags. So, when you're using React.lazy for dynamic imports, make sure the component variables are capitalized. This signals to React that they are components, not HTML elements.

Here's a revised version of your code with the necessary adjustments:

import React, { Suspense } from 'react';

// Correctly capitalized component names
const LazySkeleton = React.lazy(() => import('@my-sdk/skeleton'));
const LazyComponent = React.lazy(() => import('@my-sdk/component'));

// Using a component in fallback correctly
const SkeletonWithFallback = (
 <Suspense fallback={<div>Loading Skeleton...</div>}>
   <LazySkeleton />
 </Suspense>
);

function App() {
 return (
   <Suspense fallback={SkeletonWithFallback}>
    <LazyComponent />
   </Suspense>
 );
}

export default App;

In this updated version, I've capitalized LazySkeleton and LazyComponent to ensure React recognizes them as components. Additionally, I've adjusted the fallback to use SkeletonWithFallback, ensuring the structure adheres to React's expectations for lazy loading and suspense.

Hope this clears things up for you!