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

"gatsby develop" works well. However, an error occurs in 'gatsby build'

Something went wrong installing the "sharp" module

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

The above problem occurred in the beginning, so we solved it in the following way.

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

'gatsby build' problem

I have confirmed that it works well in the develop environment.

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

This is the full code address.

Thank you.

Summarizing a lot gatsby develop is interpreted by the browser while gatsby build is compiled in the Node server (your machine or your deploy server) so the behavior of your code is slightly different. Especially to what's related to global objects and SSR (Server-Side Rendering). The fact that your code works under gatsby develop means that is working under certain specific conditions, not that your code works always or has no errors, this should be inferred if it succeeds in a gatsby build.

In your case, it seems that the posts data is undefined when using memoized hook (useMemo), at least, in the initial render.

Try using:

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

Or wrapping the filter under:

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