Stripe + NextJs-未定义窗口

Question

我正在尝试在NextJs https://github.com/stripe/react-stripe-elements/blob/master/README.md#server-side-rendering-ssr

中使用Stripe

我一直收到错误“未定义窗口”。我想念什么吗？代码在上面的链接中。

Answer 1

显示

"window is not defined" 的原因是您的代码已server-side呈现并且无法访问全局 window 对象，因为只有客户会明白的东西。将代码移至lifecycle methods内，因为它们仅在client-side上运行。

Answer 2

另一种选择是对 Stripe 组件使用动态导入并禁用 SSR。

StripeForm 组件文件（默认导出）
component/StripeForm.tsx

像这样在pages/stripe中动态导入

const StripeForm = dynamic(() => import("../components/StripeForm"), { ssr: false } )

return (
   ...
   <StripeForm />
   ...
)