为什么 gatsby develop 运行良好，而 gatsby build 运行不正常？ - 错误#95313

Question

“gatsby develop”运行良好。但是，'gatsby build'

出现错误

Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-arm64v8.node'

一开始就出现了以上问题，所以我们通过以下方式解决了。

rm -r node_modules/sharp
yarn install --check-files

'gatsby build'问题

我已经确认它在开发环境中运行良好。


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

failed Building static HTML for pages - 3.088s

 ERROR #95313 

Building static HTML failed for path "/main/post/"

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


  19 |   const postListData = useMemo(
  20 |     () =>
> 21 |       posts.filter(
     |             ^
  22 |         ({
  23 |           node: {
  24 |             frontmatter: { categories },


  WebpackError: TypeError: Cannot read properties of undefined (reading 'filter')

package.json
{
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@types/react-helmet": "^6.1.5",
    "gatsby": "^4.10.3",
    "gatsby-plugin-canonical-urls": "^4.10.0",
    "gatsby-plugin-emotion": "^7.10.0",
    "gatsby-plugin-image": "^2.10.1",
    "gatsby-plugin-offline": "^5.10.2",
    "gatsby-plugin-react-helmet": "^5.10.0",
    "gatsby-plugin-robots-txt": "^1.7.0",
    "gatsby-plugin-sharp": "^4.10.2",
    "gatsby-plugin-typescript": "^4.10.1",
    "gatsby-remark-copy-linked-files": "^5.10.0",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^6.10.2",
    "gatsby-remark-prismjs": "^6.10.0",
    "gatsby-remark-smartypants": "^5.10.0",
    "gatsby-source-filesystem": "^4.10.1",
    "gatsby-transformer-remark": "^5.10.2",
    "gatsby-transformer-sharp": "^4.10.0",
    "prismjs": "^1.27.0",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.16.0",
    "@typescript-eslint/parser": "^5.16.0",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.6.1",
    "typescript": "^4.6.3"
  },
}

https://github.com/urther/gatsby_blog

这是完整的代码地址。

谢谢。

Answer 1

总结很多 gatsby develop 由浏览器解释，而 gatsby build 在节点服务器（您的机器或部署服务器）中编译，因此代码的行为略有不同。特别是与 global objects and SSR (Server-Side R渲染）。您的代码在 gatsby develop 下工作的事实意味着它在某些特定条件下工作，而不是您的代码始终工作或没有错误，如果它在 gatsby build.[=21 中成功，应该推断出这一点=]

在你的情况下，似乎 posts 数据在使用 memoized hook (useMemo) 时是 undefined，至少在初始渲染中是这样。

尝试使用：

const PostList: FunctionComponent<PostListProps> = ({
  selectedCategory,
  posts,
}) => {
  const postListData = useMemo(
    () =>
      posts?.filter(
        ({
          node: {
            frontmatter: { categories },
          },
        }: PostListItemType) =>
          selectedCategory !== 'All'
            ? categories.includes(selectedCategory)
            : true,
      ),
    [selectedCategory],
  )

或将 filter 换行在：

if(posts){
  posts.filter(
    ({
      node: {
        frontmatter: { categories },
      },
    }: PostListItemType) =>
      selectedCategory !== 'All'
        ? categories.includes(selectedCategory)
        : true,
  ),
}

为什么 gatsby develop 运行良好，而 gatsby build 运行不正常？ - 错误#95313

Why does gatsby develop work well, but gatsby build doesn't work? - ERROR #95313

reactjs

typescript

webpack

gatsby

gatsby-plugin

'gatsby build'问题