Invalid suspense option usage in next/dynamic

Question

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.

Answer 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