Suspense / lazy combined with import?

[kurtbuilds]

I'm trying to do code splitting, and I can't figure out how to make it work. I'm not up to date on a lot of frontend, so please tell me if I'm approaching this the wrong way.

The longer context is that I want to use vite & react to create a blog (almost entirely SSG, but with frontend javascript that might fetch related articles, comments, etc.). Ideally, I want to have the same stack as what I'd use for a SPA, so that whether I'm working on the blog or SPA, the code patterns don't change, and I can reuse components between the two.

I created a directory blog/ that contains a bunch of .mdx files. I then created:

// blog/index.tsx
export const blog = import.meta.glob('./*.mdx', {eager: true})

I'm using wouter-preact for client-side routing. I created a component Routes like this:

export function Routes() {
    let [location, ] = useLocation()
    return <Switch>
        <Route path="/" component={Landing}/>
        <Route path="/:rest*" component={() => {
            let path = `.${location}.mdx`
            let post = blog[path]
            if (!post) {
                return <div>404</div>
            }
            return post.default()
        }}/>
    </Switch>
}

And this works as desired. I have additional scripts for an entry-server.tsx and prerender.js that does the SSG rendering, and those work as desired.

However, this doesn't actually achieve code splitting, because of {eager: true}. Ok, let's remove that and see what happens:

// blog/index.tsx
export const blog = import.meta.glob('./*.mdx', {eager: true})

And update the routes to use suspense:

export function Routes() {
    let [location,] = useLocation()
    return <Suspense fallback={<div>Loading...</div>}>
        <Switch>
            <Route path="/" component={Landing}/>
            <Route path="/:rest*" component={() => {
                let path = `.${location}.mdx`
                let post = blog[path]
                if (!post) {
                    return <div>404</div>
                }
                return lazy(() => post.default())
            }}/>
        </Switch>
    </Suspense>
}

With this, there's no error shown, either in browser or with vite, but nothing shows on the page either. It's blank.

If I try different calling patterns, they all come back with different errors:

<Route path="/:rest*">
                {lazy(() => {
                    let path = `.${location}.mdx`
                    let post = blog[path]
                    if (!post) {
                        return <div>404</div>
                    }
                    return post.default
                })}</Route>

gives

suspense.js:246 Uncaught TypeError: Cannot read properties of undefined (reading 'then')
    at o (suspense.js:246:9)

This other one:

<Route path="/:rest*">
                {lazy(() => {
                    let path = `.${location}.mdx`
                    let post = blog[path]
                    if (!post) {
                        return <div>404</div>
                    }
                    return post.default()
                })}</Route>

gives:

route.tsx:18 Uncaught (in promise) TypeError: post.default is not a function
    at route.tsx:18:33

I'm using:

• vite: 4.3.9
• preact: 10.15.1
• @mdx-js/rollup: 2.3.0
• wouter-preact: 2.11.0

[marvinhagemeister]

I think you got a bit confused as to how lazy works. It returns a component definition, not a value you can directly put into JSX.

I think what you're looking for is this:

// lazy() returns a component
const LazyComponent = lazy(() => import('./path/to/my/file.js'));

// Usage, remember lazy() returns a component
<LazyComponent />

[kurtbuilds]

I see. How do I combine that import.meta.glob then? Otherwise, it seems like I have to declare every post, which seems to defeat the purpose of import.meta.glob.

[marvinhagemeister]

import.meta.glob is a vite specific feature. You might want to take a look at their docs where they explain how it can be used: https://vitejs.dev/guide/features.html#glob-import

As explained there, the import.meta.glob is expanded during compilation to a plain record with import statements:

// code produced by vite
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

You can iterate over that and build the lazy components ahead of time. Then in your router simply graph the correct one from the record and that's it.

[kurtbuilds]

Got i! Ok I had to play with it a bit more, but the routing is working now. There's one final issue I'm encountering: it seems like the SSG doesn't work with lazy. The error I'm getting is:

node:internal/process/esm_loader:46
      internalBinding('errors').triggerUncaughtException(
                                ^
Promise { <pending> }

I'm tried using something like:

export const blog = import.meta.glob('./*.mdx', {eager: import.meta.env.SSR})

But that causes an error because apparently the value of eager has to be statically known.

---

For anyone else who gets stuck, here's the solution to the lazy loading:

// blog/index.tsx
export const blog = import.meta.glob('./*.mdx') // Note that eager is off, i.e. {eager: false}

In Routes, I can directly wrap the post in lazy, but had to assign it and then use the JSX syntax to call it. Suspense also had to go around the post, rather than the whole of Routes.

export function Routes() {
    let [location,] = useLocation()
    return <Switch>
        <Route path="/" component={Landing}/>
        <Route path="/:rest*" component={() => {
            let path = `.${location}.mdx`
            let post = blog[path]
            if (!post) {
                return <div>404</div>
            }
            const LazyComponent = lazy(post)
            return <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent/>
            </Suspense>
        }}/>
    </Switch>
}

[developit]

@kurtbuilds one thing I'd recommend would be to run lazy() up-front, rather than within your component function as above. Each time you call lazy(), you're creating a new "lazy wrapper" component - that means that navigating between two routes that resolve to the same component in your router will remount them (because they're the same component, but different wrapper components).

To fix that:

import {lazy} from 'preact/compat';

const posts = import.meta.glob('./*.mdx', {eager: false});

export const blog = {};
for (let i in posts) {
  blog[i] = lazy(posts[i]);
}

export function Routes() {
    let [location,] = useLocation()
    return <Switch>
        <Route path="/" component={Landing}/>
        <Route path="/:rest*" component={() => {
            let path = `.${location}.mdx`
            let Post = blog[path]
            if (!Post) {
                return <div>404</div>
            }
            return <Suspense fallback={<div>Loading...</div>}>
                <Post/>
            </Suspense>
        }}/>
    </Switch>
}

Also, it might be possible to make this work without the Suspense fallback too:

import {lazy} from 'preact/compat';

export const blog = {};

// during SSR, everything is synchronous and there's no lazy wrapper components:
if (import.meta.env.SSR) {
  const posts = import.meta.glob('./*.mdx', {eager: true});
  for (let i in posts) {
    blog[i] = posts[i].default || posts[i];
  }
} else {
  const posts = import.meta.glob('./*.mdx', {eager: false});
  for (let i in posts) {
    blog[i] = lazy(posts[i]);
  }
}


export function Routes() {
    let [location,] = useLocation()
    return <Switch>
        <Route path="/" component={Landing}/>
        <Route path="/:rest*" component={() => {
            let path = `.${location}.mdx`
            let Post = blog[path]
            return <Post/> ?? <div>404</div>
        }}/>
    </Switch>
}

[kurtbuilds]

Got it! Thank you so much. The point about lazy creating a new component each time was the key.

I had a version working with lazy on the server using preact-ssr-prepass.

Your solution to load it eagerly in SSR mode seems to work perfectly. I was able to remove the preact-ssr-prepass library, and everything appears to be working now.

Thank you all for helping me get past this issue!