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

Question

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

由于我只能选择从组件详细信息更改道具，因此我无法读取/写入最终将所有内容聚集在一起的包文件，因为它未包含在“gatsby-build”的公共文件夹中。

我尝试过的：

• 在本地编辑包文件，它只在我的机器上工作，但是当我将它推送到 netlify 时，它只接收公共文件夹和相应的 package.json 文件而不是“node-modules 文件夹”，我无法让 netlify 读取文件我自己改变了，因为它直接从 github 页面请求它。

---

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

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

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

Answer 1

当使用第三方模块处理window的盖茨比你需要一个添加null的SSR（在加载器自身的配置的WebPack避免transpilation小号erver-小号IDE [R endering）。这是因为gatsby develop发生在浏览器中（有window），而gatsby build发生在节点服务器中，显然没有 awindow或其他全局对象（因为它们甚至还没有定义）。

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/是正确的名称。

使用补丁包可能会起作用，但请记住，您正在添加一个额外的包，这是另一个可能会影响站点性能的捆绑文件。建议的代码段是一个内置解决方案，在您构建应用程序时会触发。