title |
---|
Invalid Usage of `suspense` Option of `next/dynamic` |
- You are using
{ suspense: true }
with React version older than 18. - You are using
{ suspense: true, ssr: false }
. - You are using
{ suspense: true, loading }
.
If you are using { suspense: true }
with React version older than 18
- You can try upgrading to React 18 or newer
- If upgrading React is not an option, remove
{ suspense: true }
fromnext/dynamic
usages.
If you are using { suspense: true, ssr: false }
Next.js will use React.lazy
when suspense
is set to true. React 18 or newer will always try to resolve the Suspense boundary on the server. This behavior can not be disabled, thus the ssr: false
is ignored with suspense: true
.
- You should write code that works in both client-side and server-side.
- If rewriting the code is not an option, remove
{ suspense: true }
fromnext/dynamic
usages.
If you are using { suspense: true, loading }
Next.js will use React.lazy
when suspense
is set to true, when your dynamic-imported component is loading, React will use the closest suspense boundary's fallback.
You should remove loading
from next/dynamic
usages, and use <Suspense />
's fallback
prop.