2

"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.

mango
  • 47
  • 5
  • In practice, errors not detected by `gatsby develop` won't be a big problem. Issues like this won't occur often. Of course, you have to fix them. Always compile your site with `gatsby clean; gatsby build`and fix all errors. I write this, because I saw in the beginning more frequently issues with develop/build. Today, this almost never happens to me anymore. So keep going. You will like Gatsby. – Stefan Mar 29 '22 at 12:11
  • Thank you, but the same problem occurs when I proceed with 'gatsby clean'. – mango Mar 29 '22 at 12:24
  • Sorry, perhaps my comment is misleading (and useless). Just wanted to confirm, that this kind of issues (in dev okay, in build errors) appear more often when you start developing with Gatsby. Later, with more practice, this kind of issues appear seldom. For the correct explanation, see below. – Stefan Mar 29 '22 at 12:40

1 Answers1

1

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,
  ),
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • However, even if I add it, problems occur in files in the same path. like - `Building static HTML failed for path "/main/post/PostItem/"` Is there any other problem? – mango Mar 29 '22 at 11:43
  • With what error is failing now? – Ferran Buireu Mar 29 '22 at 12:04
  • `WebpackError: TypeError: Cannot destructure property 'childImageSharp' of 'undefined' as it is undefined.` I have confirmed that this error appears in the main/post/PostItem – mango Mar 29 '22 at 12:20
  • Yes, now you need to follow the stack trace of the issue. Because `posts` can be `undefined` (even `null`) so the properties that are destructured or lifted can be too, potentially accessing `null` variables that are breaking your code. Add conditions were needed to avoid accessing wrong variables (i.e: instead of destructuring `thumbnail` as is, add a default value,) or ternary conditions to avoid render items that uses null variables directly – Ferran Buireu Mar 29 '22 at 12:46
  • 1
    Thank you. It's very difficult. I'll think about it. – mango Mar 29 '22 at 12:58