Search code examples
javascriptgatsbyfont-awesome

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

I have spent three hours trying to debug this Gatsby build error.

It says to use a non-minified command, but gatsby develop doesn't throw any error so I'm a bit unsure on how to debug this.

Looking online reveals very little for the /styles/ folder.

My Netlify server also throws the same error as well as failing locally on Mac.

Any suggestions on where to start?

 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

Here is my package 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"
    }
}
Solution

  • After having access to the repo (which runs on Gatsby) I found that /styles/ folder when searched was inside the /public/ folder which is generated by gatsby, this pointed me to the same error that referenced the chunk error "componentChunkName": "component---src-pages-styles-js", I then searched for this file which existed in the .cache, this file showed me the error was coming from @emotion trying to compile the src/pages/styles.js file that is used by index-old.js.

    It seemed that Gatsby was interpreting /src/pages/styles.js as a normal static page to build, but because it is returning a function that returned emotion JSX it couldn't build properly as Gatsby expects all .js files to return React JSX code.

    It turned out in this project, these files wasn't actually used anymore so simply deleting them fixed the issue. If it was used though, simply having styles.js somewhere other than the /src/pages folder would fix this. I'd recommend having a views folder where you store all pages and styling relative to it to avoid Gatsby trying to compile pages from styling.