Stripe + NextJs - 窗口未定义

Question

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

我不断收到错误“窗口未定义”。 我错过了什么吗？ 代码在上面的链接中。

Answer 1

由于您的代码在server-side呈现并且无法访问全局窗口对象，因此显示"window is not defined" ，因为这是只有客户端才能理解的内容。 将您的代码移动到lifecycle methods因为它们仅在client-side运行。

Answer 2

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

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

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

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

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