npm 运行 build gatsby: "Page data from page-data.json for the failed page "/404/"..."

Question

当 npm 构建我的 gatsby 项目时，我得到以下信息：

Page data from page-data.json for the failed page "/404/": {
  "componentChunkName": "component---src-pages-404-js",
  "path": "/404/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": []
}

failed Building static HTML for pages - 3.357s

 ERROR #95313 

Building static HTML failed for path "/404/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  21 |     };
  22 |     this.defaultAttributeTypes = {
> 23 |       position: 'Float32Array',
     | ^
  24 |       normal: 'Float32Array',
  25 |       color: 'Float32Array',
  26 |       uv: 'Float32Array'

不知道是什么意思，上网搜了一下，发现了这个问题，了解到这个错误可能是使用window对象引起的，于是试了一下检查我代码中的 window 使用，问题是我使用了反应三纤维，它可能正在使用这个文档对象，

然后，相同的答案表明可以通过向 gatsby-node.js 添加代码来绕过此错误（我猜它没有说），基本上是导出 onCreateWebpackConfig（在这个文件中我' m 导出 sourceNodes 和 onCreateWebpackConfig，希望这不会导致任何错误）

问题依然存在。

我也有一个404页面

import React from "react";

const NotFoundPage = () => {
    return <div>Sorry, the page you requested was not found</div>;
};

export default NotFoundPage;

任何提示，我真的不知道如何解决它

****** 编辑 ******

Ferran 问我 onCreateWebpackConfig，这里是：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html" || stage === "develop-html") {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /react-three-fiber/,
                        use: loaders.null(),
                    },
                ],
            },
        });
    }
};

我输入了“test: /react-three-fiber/”，但我不确定，我应该输入“坏模块”，我不知道，我只知道我的组件

Answer 1

正如您在处理 third-party modules that use window or other global objects you need to add a null loader to webpack configuration to bypass the server-side compilation using onCreateWebpackConfig. In your case, since the package name is @react-three/fiber 时所指出的那样，请尝试以下操作：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /@react-three\/fiber/,
          use: loaders.null(),
        },
      ],
    },
  });
};

请记住，test 是一个正则表达式（这就是为什么在斜线之间，/），它与 node_modules 下的文件夹名称相匹配。请确保文件夹名称与正则表达式匹配。

回答 configuring gatsby webpack to don't check base objects like window when compiling a component

的口是心非

But I also use canvas, window.innerWidth, and whatnot, in a component

How do I set another rule to indicate webpack to not throw that error when checking a component?

对于 third-party 依赖项，您只需要继续将库添加到之前的 null-loader 配置：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /@react-three\/fiber/,
          use: loaders.null(),
        },
        {
          test: /other-library/,
          use: loaders.null(),
        },
      ],
    },
  });
};

请记住我所说的，/other-library/ 代表 node_modules 中的文件夹名称。

window对象内部使用，只需要在使用前添加如下条件：

if(typeof window !== "undefined"){
  //your window calculation
}

根据您使用 window 的时间和方式，您可能不需要在这种情况下将其包装（即：如果您在 useEffect 中使用 window 而不是触发直到加载 DOM，其中 window 将始终设置）。

所有这些方法都可以在 Gatsby 文档中找到：https://www.gatsbyjs.com/docs/debugging-html-builds/

By the way, I'm having two exports in gatsby-node.js: exports.sourceNodes = async ({... for a data that I use with a graphql, and exports.onCreateWebpackConfig =... described here, is there any problem with that?

当然不是，只是文件导出功能。这就是它应该如何工作，这就是为什么你有一堆 API 可用的原因。

npm 运行 build gatsby: "Page data from page-data.json for the failed page "/404/"..."

npm run build gatsby: "Page data from page-data.json for the failed page "/404/"..."

build

gatsby

react-three-fiber