React.lazy and navi

[DB-Alex]

Is it already possible to lazy load components using navi?

import React, {lazy} from 'react';
import useStyles from './Blocks.styles';

const Paragraph = lazy(() => import('components/Paragraph'));

{blocks.map((block, index) => {
                if (block.blockName === 'core/paragraph') {
                    return (
                        <Paragraph
                            key={index}
                            content={block.innerContent[0]}
                        />
                    );
                } else {
                    return null;
                }
            })}

This now throws:

{ Invariant Violation: ReactDOMServer does not yet support lazy-loaded components.

Is there another way to archive this with navi?

[jamesknelson]

There's no way to do it with React.lazy (yet), but it's possible to load components/routes asynchronously within your routes, and pass them to your component as view props.

E.g. using Navi's lazy function:

import { lazy, mount } from 'navi'

export default mount({
  '/': lazy(() => import('./landingRoutes')),
  '/blog': lazy(() => import('./blogRoutes')),
})

[tony]

@jamesknelson Does lazy loading a route imply webpack will chunk it?

Is there a minimal viable example of webpack, typescript, react-navi with automatic chunking by chance?