Using Shortcodes with React lazy

[tnorlund]

I'd like to split up my components using React lazy. Can I do this using MDX shortcodes? I'm currently getting this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MDXCreateElement.

...
const CICD = React.lazy( () => import( 'components/Icons/CICD' ) )
...
const components = { 
  DocsGrid,
  CICD: <>
    {
      typeof window ==! "undefined" && <React.Suspense 
        fallback={<div height={`200pt`}></div>}
      ><CICD /></React.Suspense>
    }
  </>
}
...
<MDXProvider components={components}>
    {children}

[ChristianMurphy]

The error you're getting is because you are passing a rendered element instead of a component.

const components = { 
  DocsGrid,
  CICD: () => (<>
    {
      typeof window ==! "undefined" && <React.Suspense 
        fallback={<div height={`200pt`}></div>}
      ><CICD /></React.Suspense>
    }
  </>)
}

should work.

[tnorlund]

It won't build without the typeof window ==! "undefined" && due to SSR. When I build with that, the page only shows the fallback component. Is there a way to lazy load components in MDX?

[JounQin]

Maybe you can try typeof window ==! "undefined" ? <></> : null

[tnorlund]

Maybe you can try typeof window ==! "undefined" ? <></> : null

This causes the SSR error.

Outside of MDX, I needed to use the condition within the component:

return <>
{ !isSSR <React.Suspense fallback={<div height={`200pt`}></div>}><CICD /></React.Suspense>}
</>

[tnorlund]

So I just tried these 2 examples.

// Example A
const components = { 
  DocsGrid,
  CICD: () => ( <div style={{ height: `200pt` }} >Loading...</div> )
}

// Example B
const components = { 
  DocsGrid,
  CICD: () => ( <>{typeof window ==! "undefined" && <div style={{ height: `200pt` }} >Loading...</div>}</> )
}

Example A rendered the div fine. After building with Example B, there's no div and the component is skipped entirely.

[tnorlund]

The latest ReactDOM doesn't support react suspense; this is why you need the typeof window ==! "undefined" && .... I found a package for splitting code that supports SSR and ReactDOM. I wish there was a vanilla answer to this, but it looks like it just isn't supported yet.

import loadable from '@loadable/component'

const components = { 
  DocsGrid,
  Analytics: loadable( () => import( 'components/Flow/Analytics' ) ),
...