3

I have a loader component and I want it to appear while my page is rendering. According to the docs, when using suspense my code should look like this

const DynamicLazyComponent = dynamic(() => import('../components/loader'), {
    suspense: true,
})

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Suspense fallback={`loading`}>
                <DynamicLazyComponent />
                ...some code here...
            </Suspense>
        </>
    )
}

But I end up with an error that says

Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense

I'm sure I followed what the docs stated, but I'm not sure as to why I'm getting these errors.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Niic
  • 175
  • 1
  • 1
  • 11
  • Note that it only works on client-side or server-side with fallback – Nico Oct 01 '21 at 08:09
  • @Nico Is there a way I could show a loader component while the page is rendering? If this were React, I'd be using suspense fallback – Niic Oct 01 '21 at 08:12
  • @Nico `works on client-side or server-side` , in the code above it's generating on ssg ?. adding `{ suspense: true, ssr: false }` could help? – Chemi Adel Oct 01 '21 at 08:38
  • @ChemiAdel Added what you said, no luck. – Niic Oct 01 '21 at 08:49

1 Answers1

1

To use suspense option in Next JS, you need next 12, react 18 and react-dom 18.

You can see more detail information here. https://nextjs.org/docs/advanced-features/react-18/overview

Mikeul
  • 51
  • 1
  • 7
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 12 '22 at 18:12