Skip to content

Prerendering with lazy and suspense(Template execution failed: [object Promise]) #1359

@RomanistHere

Description

@RomanistHere

Hey guys, I want to have structure like this:

App.js:

import { Suspense, lazy } from 'preact/compat'

import Preloader from "../components/Preloader/Preloader"

const Comp1= lazy(() => import('../routes/Comp1/Comp1'))
const Comp2= lazy(() => import('../routes/Comp2/Comp2'))
...

export default () => {
  return (
    <Suspense fallback={<Preloader />}>
      <Router>
        <Route path="/" component={Comp1} />
        <Route path="/comp2" component={Comp2} />

It's simple routing with preloader till any new page load.
dev server and build without prerendering working, but I want to have structure like this prerendered.
If we try to build structure above there is "Template execution failed: [object Promise]" error.

I've tried:
-preact-async-route and AsyncRoute component. Current version asks to use lazy/suspense. With AsyncRoute I was getting errors too.
-"async!" flag in imports - It didn't help much either - there are were errors as well.
-moving pages to "routes" folder doesn't help to split at all - I've got the same size of chunks.

I parsed all documentation I found and still have no clue what would be the "right" way to implement it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions