Gatsby 构建失败 - 错误“窗口”在服务器端渲染期间不可用

Posted 2023-03-07

【中文标题】Gatsby 构建失败 - 错误“窗口”在服务器端渲染期间不可用

【英文标题】：Gatsby Failed Build - error "window" is not available during server side rendering

【发布时间】：2021-01-26 05:51:07

【问题描述】：

我最近一直在尝试使用外部包构建我的 gatsby (react) 站点。 这个包的链接是“https://github.com/transitive-bullshit/react-particle-animation”。

由于我只能从组件详细信息中更改道具，因此我无法读取/写入最终组合在一起的包文件，因为它不包含在“gatsby-build”的公共文件夹中。

我尝试过的：

在本地编辑包文件，它只在我的机器上工作，但是当我将它推送到 netlify 时，它只接收公用文件夹和相应的 package.json 文件而不是“节点模块文件夹”，我无法制作 netlify读取我自己更改的文件，因为它直接从 github 页面请求它。

---

作为我从对该问题的评论中找到的解决方案，我们可以使用"Patch-Package" 将我们的修复保存到节点模块，然后在任何我们想要的地方使用它。 这实际上对我有用！

解释我是如何修复它的：（因为大部分已经写在“补丁包文档”中），所以提一下要点：

我首先对出现错误的本地包文件进行了更改。（对我来说，它们位于我的 node_modules 文件夹中） 然后我使用补丁包文档来指导自己完成其余部分。 在我将更改推送到 github 后它就可以工作了，现在，补丁包总是给我编辑后的 ​​node_module 版本。

【问题讨论】：

在我看来，您的选择是：a）向修复它的库发出拉取请求，b）创建库的分支并将其推送到 NPM 并使用您的分支，c）使用patch-package 之类的东西，或者 d) 使用不同的库。

非常感谢您的建议！ “补丁包”技巧实际上奏效了，我又回到了流程中。 @cbr

太棒了！请务必添加一个描述您如何修复它的答案。

【参考方案1】：

在处理 Gatsby 中使用 window 的第三方模块时，您需要在其自己的 webpack 配置中添加一个 null 加载器，以避免在 s-s-r 期间进行转译（Server-Side R渲染）。这是因为gatsby develop 出现在浏览器中（有window），而gatsby build 出现在显然没有window or other global objects 的Node 服务器中（因为它们甚至还没有定义）。

exports.onCreateWebpackConfig = ( stage, loaders, actions ) => 
  if (stage === "build-html") 
    actions.setWebpackConfig(
      module: 
        rules: [
          
            test: /react-particle-animation/,
            use: loaders.null(),
          ,
        ],
      ,
    )
  

请记住，test 值是一个正则表达式，它将匹配 node_modules 下的文件夹，因此，请确保 /react-particle-animation/ 是正确的名称。

使用patch-package 可能会起作用，但请记住，您正在添加一个额外的包，即另一个可能影响网站性能的捆绑文件。建议的 sn-p 是一个内置解决方案，在您构建应用程序时会触发。

【讨论】：

如果尝试在 AWS 上部署时不起作用怎么办？

如果不查看代码/日志，就无法猜测您的 AWS 部署中可能出现的问题。每种情况都应特别对待。此外，提示的错误可能是由某些潜在问题引起的。请添加提供详细信息的新答案，以便社区提供帮助。