reactjs - next/dynamic 中无效的悬念选项使用

Question

我有一个加载器组件，我希望它在我的页面呈现时出现。根据docs ，当使用悬念时，我的代码应该是这样的

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

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

但我最终遇到了一个错误

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

我确定我遵循了文档中的说明，但我不确定为什么会出现这些错误。

Answer 1

要在 Next JS 中使用悬念选项，您需要 next 12、react 18 和 react-dom 18。

您可以在此处查看更多详细信息。 https://nextjs.org/docs/advanced-features/react-18/overview