Gatbsy错误‘页面数据从页-data.json为失败的页“/’仅与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，这是GraphQL在index.js中的查询

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>

然而，尽管如此，只有在存在body和data的情况下，才会呈现mdx，因此将绕过Netlify构建--我认为这个问题可以从您的过滤器散列GraphQL开始：

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

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

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

您可以用以下方式自动创建：

node -v > .nvmrc

上面的命令将创建一个.nvmrc文件，其中包含来自本地计算机的Node (node -v)。当Netlify在构建过程中找到它时，它将被用作依赖项的基节点版本。