为路径“/styles/”构建静态 HTML 失败 - Gatsby，fontawesome

Question

我花了三个小时试图调试这个 Gatsby 构建错误。

它说要使用非缩小命令，但是 gatsby develop 不会抛出任何错误，所以我有点不确定如何调试它。

在线查找 /styles/ 文件夹的信息很少。

我的 Netlify 服务器也抛出相同的错误，并且在 Mac 上本地失败。

有什么关于从哪里开始的建议吗？

 ERROR 

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

failed Building static HTML for pages - 2.025s

 ERROR #95313 

Building static HTML failed for path "/styles/"

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


  1 | /*!
> 2 |  * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
    | ^
  3 |  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4 |  */
  5 | function _typeof(obj) {


  WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20styles%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  
  - index.es.js:2 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:2:1
  
  - index.es.js:2 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:2:1
  
  - index.es.js:4 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:4:1
  
  - index.es.js:27 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:27:1
  
  - index.es.js:26 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:26:37
  
  - index.es.js:37 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:37:1
  
  - static-entry.js:294 
    play-landing/.cache/static-entry.js:294:22
  
  - index.es.js:147 
    [play-landing]/[@fortawesome]/fontawesome-svg-core/index.es.js:147:1

这是我的包裹JSON

{
    "name": "play-landing",
    "description": "-",
    "version": "1.1.3",
    "author": "Luke Brown",
    "dependencies": {
        "@emotion/react": "^11.7.1",
        "@fortawesome/fontawesome-svg-core": "^1.2.36",
        "@fortawesome/free-brands-svg-icons": "^5.15.4",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/pro-light-svg-icons": "^5.15.4",
        "@fortawesome/react-fontawesome": "^0.1.17",
        "@mui/material": "^5.3.1",
        "bulma": "^0.9.0",
        "dotenv": "^14.3.2",
        "gatsby": "^4.0.0",
        "gatsby-plugin-emotion": "^7.6.0",
        "gatsby-plugin-image": "^2.0.0",
        "gatsby-plugin-netlify": "^3.14.0",
        "gatsby-plugin-netlify-cms": "^6.0.0",
        "gatsby-plugin-purgecss": "^6.0.0",
        "gatsby-plugin-react-helmet": "^5.0.0",
        "gatsby-plugin-react-svg": "^3.1.0",
        "gatsby-plugin-sass": "^5.0.0",
        "gatsby-plugin-sharp": "^4.0.0",
        "gatsby-plugin-web-font-loader": "^1.0.4",
        "gatsby-remark-copy-linked-files": "^5.0.0",
        "gatsby-remark-images": "^6.0.0",
        "gatsby-remark-relative-images": "^0.3.0",
        "gatsby-source-filesystem": "^4.0.0",
        "gatsby-transformer-remark": "^5.0.0",
        "gatsby-transformer-sharp": "^4.0.0",
        "lodash": "^4.17.15",
        "lodash-webpack-plugin": "^0.11.4",
        "lottie-react": "^2.2.1",
        "netlify-cms-app": "^2.15.65",
        "netlify-cms-media-library-cloudinary": "^1.3.10",
        "netlify-cms-media-library-uploadcare": "^0.5.10",
        "prop-types": "^15.6.0",
        "react": "^17.0.0",
        "react-dom": "^17.0.0",
        "react-helmet": "^6.0.0",
        "sass": "^1.43.2",
        "uuid": "^8.0.0"
    },
    "keywords": [
        "gatsby"
    ],
    "license": "MIT",
    "main": "n/a",
    "scripts": {
        "clean": "gatsby clean",
        "start": "npm run develop",
        "build": "npm run clean && gatsby build",
        "develop": "npm run clean && gatsby develop",
        "serve": "gatsby serve",
        "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "prettier": "^2.0.5"
    },
    "engines": {
        "node": ">= 14.15.0"
    }
}

Answer 1

在访问回购协议（在 Gatsby 上运行）后，我发现 /styles/ 文件夹在搜索时位于由 gatsby 生成的 /public/ 文件夹内，这让我遇到了同样的错误引用了块错误 "componentChunkName": "component---src-pages-styles-js"，然后我搜索了 .cache 中存在的这个文件，这个文件告诉我错误来自@emotion 试图编译 src/pages/styles.js 文件index-old.js.

使用

似乎 Gatsby 将 /src/pages/styles.js 解释为要构建的普通静态页面，但因为它是 returning 一个 returned emotion JSX 的函数，所以它无法构建正如 Gatsby 期望所有 .js 文件到 return React JSX 代码一样正确。

事实证明，在这个项目中，这些文件实际上不再被使用，所以简单地删除它们就解决了问题。如果使用它，只需在 /src/pages 文件夹以外的其他地方设置 styles.js 即可解决此问题。我建议有一个 views 文件夹，您可以在其中存储所有页面和与之相关的样式，以避免 Gatsby 尝试从样式编译页面。

为路径“/styles/”构建静态 HTML 失败 - Gatsby，fontawesome

Building static HTML failed for path "/styles/" - Gatsby, fontawesome

javascript

font-awesome

gatsby