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 />
   ...
)