reactjs - 网页包错误 : ReferenceError: document is not defined - netlify build

Question

我在 netlify 上构建项目时遇到错误(WebpackError:ReferenceError:文档未定义)。在开发中工作正常!

我看到可以用 JSDOM 解决这个问题，但我已经尝试过了，但我做不对。

    import React from "react";
    import "../css/DarkMode.css";
    
    const DarkMode = () => {
      let clickedClass = "clicked";
      const body = document.body;
      const lightTheme = "light";
      const darkTheme = "dark";
      let theme;
    
      if (localStorage) {
        theme = localStorage.getItem("theme");
      }
    
      if (theme === lightTheme || theme === darkTheme) {
        body.classList.add(theme);
      } else {
        body.classList.add(lightTheme);
      }
    
      const switchTheme = (e) => {
        if (theme === darkTheme) {
          body.classList.replace(darkTheme, lightTheme);
          e.target.classList.remove(clickedClass);
          localStorage.setItem("theme", "light");
          theme = lightTheme;
        } else {
          body.classList.replace(lightTheme, darkTheme);
          e.target.classList.add(clickedClass);
          localStorage.setItem("theme", "dark");
          theme = darkTheme;
        }
      };
    
      return (
        <button
          className={theme === "dark" ? clickedClass : ""}
          id="darkMode"
          className={"btnDarkMode"}
          onClick={(e) => switchTheme(e)}
        ></button>
      );
    };
    
    export default DarkMode;

Answer 1

扩展@mirik999's answer :

这与 jsdom 无关本身。如前所述，使用 React，您正在创建和操作虚拟 DOM (vDOM)，而使用您的代码片段，您直接指向真实的 DOM(document.body 等)。此外，这些操作会大大降低代码/应用程序的性能，因为浏览器会为此付出巨大的代价，这就是 React 如此之快的原因(除其他外)。

在 React 应用程序中操作真实的 DOM 可能会导致严重的警告和警告，可能会阻止 hydration of React (刷新/重新呈现新的点播内容)。

您的代码在 gatsby develop 而不是 gatsby build 下运行的事实，总而言之，因为 gatsby develop 由浏览器处理, where there are global objects (such as window or document) . gatsby build 在 Node 服务器中编译的 id，其中显然没有 window 或 document，因为它们甚至还没有创建。

简单的解决方法是在这种情况下包装您的代码(您使用全局对象的地方):

if (typeof window !== `undefined`) { // or typeof document !== 'undefined'
  // your code that uses global objects here
}

但正如我所说，它可能会阻碍 React 的水合作用。

要在 Gatsby 中添加主题，您有很多选择，例如使用插件 (gatsby-plugin-dark-mode) 或使用基于 React 的方法。

有用的资源:

• https://victorzhou.com/blog/dark-mode-gatsby/
• https://dev.to/hasone/how-to-add-dark-mode-in-gatsby-react-project-jml