为什么 gatsby 开发运行得很好，但是 gatsby build 却不行？ - 错误#95313

Question

“盖茨比发展”效果很好。但是'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开发是由浏览器解释的，而gatsby build在节点服务器（您的计算机或您的部署服务器）中编译了，因此代码的行为略有不同。特别是与 erver- s ide r endering）。您的代码在gatsby开发下工作的事实意味着在某些特定条件下起作用，而不是您的代码始终有效或没有错误，应在gatsby构建中成功地推断出这一点。

在您的情况下，似乎ports数据是undefined使用记忆挂钩（usememo）时，至少在初始渲染中。

尝试使用：

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

或包装过滤器下：

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