Netlify 部署有错误：WebpackError: ReferenceError: window is not defined答案

【问题标题】：Netlify deploy has error: WebpackError: ReferenceError: window is not definedNetlify 部署有错误：WebpackError: ReferenceError: window is not defined
【发布时间】：2020-04-04 05:53:37
【问题描述】：

将我的 gatsby 站点部署到 Netlify 时，我收到此错误： WebpackError：ReferenceError：未定义窗口这是我的代码：

import React, { useState } from "react";
import { Link } from "gatsby";

// components
import Layout from "../components/Layout/Layout";
import SEO from "../components/seo";

// css

export default function IndexPage() {
// i took out my strip id so I could post online
  const stripe = window.Stripe("stripeID_Here");
  const [sku, setSku] = useState("sku_GKCxZJybZKaHr7");

  const placeOrder = () => {
    stripe.redirectToCheckout({
      items: [
        {
          sku,
          quantity: 1,
        },
      ],
      successUrl: "http://localhost:8000/success",
      cancelUrl: "http://localhost:8000/cancel",
    });
  };

  return (
    <Layout>
      <SEO title="Home" />


      {/* Popular   */}
      <section id="Popular-items" className="row">
        <div className="container popular-items">
          <h2>Check out our most popular items</h2>
          <article>
            <img src="http://picsum.photos/340/400" alt="SET HAPPENS T-Shirt" />
            <h3>SET HAPPENS T-Shirt</h3>
            <select value={sku} onChange={e => setSku(e.target.value)}>
              <option value="sku_GKCxZJybZKaHr7">Small</option>
              <option value="sku_GK8OJSyke6mMrm">Medium</option>
              <option value="sku_GKCy45LwrpfmV8">Large</option>
            </select>
            <button onClick={placeOrder}>Buy Me</button>
          </article>
        </div>
      </section>
      {/* Popular End */}


    </Layout>
  );
}

它说错误“窗口”在服务器端渲染期间不可用。

那么我可以用什么来代替窗口呢？

其他一切正常。

【问题讨论】：

这是 Gatsby 文档中相关页面的链接 => gatsbyjs.org/docs/debugging-html-builds/…

标签： gatsby netlify

【解决方案1】：

在开发过程中，react 组件仅在定义了window 的浏览器中运行，因此它可以正常工作。但是当building react 组件在未定义window 的服务器上呈现时。这就是您看到此错误的原因。

您可以通过在componentDidMount 或useEffect 挂钩中调用window 来修复此错误。

你也可以试试这个

const stripe = typeof window !== 'undefined' && window.Stripe("stripeID_Here");

【讨论】：