时间戳

首页 > 解决方案 > Netlify 部署有错误：WebpackError: ReferenceError: window is not defined

gatsby - Netlify 部署有错误：WebpackError: ReferenceError: window is not defined

问题描述

将我的 gatsby 站点部署到 Netlify 时出现此错误： WebpackError: ReferenceError: window is not defined 这是我的代码：

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>
  );
}

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

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

其他一切正常。

标签： gatsbynetlify

解决方案

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

window您可以通过调用incomponentDidMount或useEffecthook来修复此错误。

您也可以尝试这样做

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

推荐阅读