Gatsby 构建失败 - 错误 "window" 在服务器端渲染期间不可用

Question

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

因为我只能从组件细节中更改道具，所以我无法 read/write 最终将所有内容组合在一起的包文件，因为它不包含在 public 'gatsby-build'.

的文件夹

我尝试过的：

在本地编辑包文件，这只在我的机器上有效，但是当我将它推送到 netlify 时，它只接收 public 文件夹和相应的 package.json 文件，而不是 'node-modules folder'，我无法让 netlify 读取我自己更改的文件，因为它直接从 github 页面请求它。

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

说明一下我是怎么修复的：（因为大部分内容已经写在“补丁包文档”中了，所以提一下要点：

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

Answer 1

在 Gatsby 中处理使用 window 的 third-party 模块时，您需要将 null 加载器添加到其自己的 webpack 配置中，以避免在 SSR 期间进行转译（S服务器-SideR渲染）。这是因为 gatsby develop 出现在浏览器中（有 window），而 gatsby build 出现在显然没有 window or other global objects 的节点服务器中（因为它们是甚至还没有定义）。

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 可能有效，但请记住，您正在添加一个额外的包，另一个可能会影响网站性能的捆绑文件。建议的代码段是一个 built-in 解决方案，会在您构建应用程序时触发。

Gatsby 构建失败 - 错误 "window" 在服务器端渲染期间不可用

Gatsby Failed Build - error "window" is not available during server side rendering

node.js

node-modules

reactjs

gatsby

netlify