Gatsby构建失败 - 错误信息为“在服务器端渲染期间window不可用”

Question

Gatsby构建失败 - 错误信息为“在服务器端渲染期间window不可用”

node.jsreactjsnode-modulesgatsbynetlify

8

最近我一直在尝试使用外部包构建我的gatsby（react）网站。

这个包的链接是“https://github.com/transitive-bullshit/react-particle-animation”。

由于所有组件细节只有更改属性的选项，我无法读取或编写该程序包文件，它们最终全部组合在“gatsby-build”的公共文件夹中，因为它没有包含在其中。

我尝试的解决方案:

本地编辑程序包文件，这只在我的电脑上有效，但当我将其推送到 netlify 时，他们只接收公共文件夹和相应的 package.json 文件，而不包括“node-modules”文件夹。因此，我无法让 netlify 读取我自己更改后的文件，因为它从 github 页面直接请求它。

作为一个解决方法，我从此问题的评论中找到了一个解决方案：我们可以使用“Patch-Package”来保存我们对节点模块的修复，然后在需要时使用它。

这真的对我有用！

要解释如何修复问题：（因为大部分内容在 “ Patch Package 文档 ” 中已经写好），我指出主要的部分：

首先，我修改了本地程序包文件中的错误。（对于我来说，它们在我的“node_modules”文件夹中）
然后，我依照 Patch Package 文档中的指导进行了修复。
在将更改推送到 github 后，它成功运行，因此现在 Patch Package 总是给我提供编辑过的节点模块版本。

- theintrigued

1

在我看来，你的选择有：a）向修复它的库发起拉取请求，b）创建库的分支并将其推送到NPM并使用你的分支，c）使用类似于patch-package的工具，或者d）使用另一个库。 - cbr

非常感谢您的建议！“patch-package”技巧确实奏效了，我又回到了正轨。@cbr - theintrigued

太好了！一定要添加一个答案来描述你是如何解决它的。 - cbr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ferran Buireu · Accepted Answer

在处理使用window的第三方模块时，需要在其自己的webpack配置中添加一个null加载器，以避免SSR（Server-Side Rendering）期间的转译。这是因为gatsby develop发生在浏览器中（有window），而gatsby build发生在Node服务器中，显然那里没有window或其他全局对象（因为它们甚至还没有被定义）。

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也许可行，但请注意，这会增加一个额外的包和另一个捆绑文件，可能会影响网站的性能。建议的代码段是一个内置解决方案，在构建应用程序时触发。