Gatsby 错误 'Page data from page-data.json for the failed page "/"' 仅适用于 Netlify

Question

我的站点在我的本地计算机上编译（develop 和 build）绝对没问题，但是当我尝试在 Netlify 上构建时出现以下错误。我主页上的 GraphQL 查询似乎有问题 - 它似乎返回空值，仅在 Netlify 上。

这是错误：

8:24:21 AM: error Page data from page-data.json for the failed page "/": {
8:24:21 AM:   "componentChunkName": "component---src-pages-index-js",
8:24:21 AM:   "path": "/",
8:24:21 AM:   "result": {
8:24:21 AM:     "data": {
8:24:21 AM:       "mdx": null
8:24:21 AM:     },
8:24:21 AM:     "pageContext": {}
8:24:21 AM:   },
8:24:21 AM:   "staticQueryHashes": [
8:24:21 AM:     "2577492939",
8:24:21 AM:     "3477169923"
8:24:21 AM:   ]
8:24:21 AM: }
8:24:21 AM: failed Building static HTML for pages - 3.841s
8:24:21 AM: error Building static HTML failed for path "/"
8:24:21 AM: 
8:24:21 AM:   17 |             <StaticImage src="../img/logobig.jpg" className="rounded float-right" alt="WaJK Logo"/>
8:24:21 AM:   18 |             <MDXRenderer>
8:24:21 AM: > 19 |               {data.mdx.body}
8:24:21 AM:      |                         ^
8:24:21 AM:   20 |             </MDXRenderer>
8:24:21 AM: Creating deploy upload records
8:24:21 AM:   21 |             <p>
8:24:21 AM:   22 |               <Link className="btn btn-primary btn-lg" to={"/" + data.mdx.frontmatter.button_link}>{data.mdx.frontmatter.button_text} &raquo;</Link>
8:24:21 AM: 
8:24:21 AM:   WebpackError: TypeError: Cannot read properties of null (reading 'body')
8:24:21 AM:   
8:24:21 AM:   - index.js:19 
8:24:22 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
8:24:21 AM:     we-are-just-kids/src/pages/index.js:19:25
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:4 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:4:1
8:24:21 AM:   
8:24:21 AM:   - extends.js:15 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/extends.js:15:1
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:13 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:13:1
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:12 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:12:1
8:24:21 AM:   
8:24:21 AM:   - inheritsLoose.js:7 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/inheritsLoose.js:7:1
8:24:21 AM:   
8:24:21 AM:   - static-entry.js:294 
8:24:21 AM:     we-are-just-kids/.cache/static-entry.js:294:22
8:24:21 AM:   
8:24:21 AM:   - index.js:9 
8:24:21 AM:     we-are-just-kids/src/pages/index.js:9:7
8:24:21 AM:   
8:24:21 AM: 
8:24:21 AM: 
8:24:21 AM: ────────────────────────────────────────────────────────────────
8:24:21 AM:   "build.command" failed                                        
8:24:21 AM: ────────────────────────────────────────────────────────────────
8:24:21 AM: 
8:24:21 AM:   Error message
8:24:21 AM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
8:24:21 AM: 
8:24:21 AM:   Error location
8:24:21 AM:   In Build command from Netlify app:
8:24:21 AM:   npm run build
8:24:21 AM: 
8:24:21 AM:   Resolved config
8:24:21 AM:   build:
8:24:21 AM:     command: npm run build
8:24:21 AM:     commandOrigin: ui
8:24:21 AM:     publish: /opt/build/repo/public
8:24:21 AM:     publishOrigin: ui

FWIW，这是 index.js 中的 GraphQL 查询：

export const query = graphql`
query {
  mdx(id: {eq: "b888df33-9710-5d1e-80f8-fe07467c2742"}) {
    id
    body
    frontmatter {
      button_link
      button_text
      left_box {
        title
        text
        button_text
        button_link
      }
      middle_box {
        button_link
        button_text
        text
        title
      }
      right_box {
        title
        text
        button_text
        button_link
      }
    }
  }
}
`

Answer 1

您可以通过添加可选的链接运算符 (?) 来绕过构建问题，例如：

<MDXRenderer>
  {data?.mdx?.body}
</MDXRenderer>

然而，尽管如此，如果 mdx 和 data 存在，这只会呈现 body，因此将绕过 Netlify 构建我认为问题可以从你的 filter-hashed GraphQL 开始在：

mdx(id: {eq: "b888df33-9710-5d1e-80f8-fe07467c2742"})

因此，如果查询未返回任何数据，您将不会在生产页面上显示任何内容。 b888df33-9710-5d1e-80f8-fe07467c2742 id 在您的本地计算机上有效，但可能在 Netlify 上无效，返回无效数据。

如果使用之前的修复您的产品没有显示任何内容，请尝试将过滤器更改为另一个已知的硬编码值（比如 slug 可能？）或尝试比较环境之间的节点版本（本地与 Netlify） .如果它们之间存在不匹配，可能是不匹配 id 的来源，因为会有不同的构建依赖项。在这种情况下，请尝试使用项目根目录中的 .nvmrc 文件设置固定的 Node 版本。

您可以自动创建：

node -v > .nvmrc

上面的命令将从您的本地计算机创建一个包含 Node 版本 (node -v) 的 .nvmrc 文件。当 Netlify 在构建过程中找到它时，它将被用作 base Node version for your dependencies.

Gatsby 错误 'Page data from page-data.json for the failed page "/"' 仅适用于 Netlify

Gatbsy error 'Page data from page-data.json for the failed page "/"' only with Netlify

gatsby

netlify