Gatsby, Wordpress, Graphql : Building static HTML failed for path

Question

Hi I am getting an error, tried and searched for many solutions but no success.

Here is the error:

failed Building static HTML for pages - 6.632s

 ERROR #95313 

Building static HTML failed for path "/blog/path/"

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


  WebpackError: TypeError: Cannot read properties of undefined (reading 'fallback')

  - gatsby-image.server.tsx:62 
    webpack:/gatsby-poc/src/components/gatsby-image.server.tsx:62:16

  - index.js:59 
    [gatsby-poc]/[decode-uri-component]/index.js:59:1

  - index.js:61 
    [gatsby-poc]/[decode-uri-component]/index.js:61:1

  - index.js:67 
    [gatsby-poc]/[decode-uri-component]/index.js:67:1

  - index.js:4 
    gatsby-poc/src/pages/index.js:4:1

  - index.js:69 
    [gatsby-poc]/[decode-uri-component]/index.js:69:1

  - index.js:67 
    [gatsby-poc]/[decode-uri-component]/index.js:67:1

  - index.js:4 
    gatsby-poc/src/pages/index.js:4:1

  - Footer.js:7 
    gatsby-poc/src/components/Footer.js:7:132

  - index.js:67 
    [gatsby-poc]/[decode-uri-component]/index.js:67:1

  - index.js:4
    gatsby-poc/src/pages/index.js:4:1

  - Footer.js:7
    gatsby-poc/src/components/Footer.js:7:132

  - index.js:67
    [gatsby-poc]/[decode-uri-component]/index.js:67:1

  - index.js:4
    gatsby-poc/src/pages/index.js:4:1

  - Footer.js:7
    gatsby-poc/src/components/Footer.js:7:132

  - index.js:67
    [gatsby-poc]/[decode-uri-component]/index.js:67:1

Dependencies installed:

"dependencies": {
    "babel-plugin-styled-components": "^2.0.7",
    "gatsby": "^5.1.0",
    "gatsby-plugin-gatsby-cloud": "^5.1.0",
    "gatsby-plugin-image": "^3.1.0",
    "gatsby-plugin-manifest": "^5.1.0",
    "gatsby-plugin-offline": "^6.1.0",
    "gatsby-plugin-react-helmet": "^6.1.0",
    "gatsby-plugin-sharp": "^5.1.0",
    "gatsby-plugin-styled-components": "^6.0.0",
    "gatsby-source-filesystem": "^5.1.0",
    "gatsby-source-wordpress": "^7.1.0",
    "gatsby-transformer-sharp": "^5.1.0",
    "html-react-parser": "^3.0.4",
    "lodash": "^4.17.20",
    "postcss": "^8.2.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.3.6",
    "typeface-merriweather": "1.1.13",
    "typeface-montserrat": "1.1.13"
  },

I am using GatsbyImage as:

<GatsbyImage
              image={featuredImage.data}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
              />

Graphql for the same:

featuredImage {
        node {
          altText
          localFile {
            childImageSharp {
              gatsbyImageData(
                quality: 100
                placeholder: TRACED_SVG
                layout: FULL_WIDTH
              )
            }
          }
        }
      }
    }

NOTE: it works in develop but failing in build.

findings: If I remove GatsbyImage Tag, it start working. Seems like something wrong with the usages of this tag.

<GatsbyImage
              image={featuredImage.data}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
              />

Answer 1

It is fixed, the problem was with SVG placeholder.

Changed:

featuredImage {
        node {
          altText
          localFile {
            childImageSharp {
              gatsbyImageData(
                quality: 100
                placeholder: TRACED_SVG
                layout: FULL_WIDTH
              )
            }
          }
        }
      }
    }

To:

        node {
          altText
          localFile {
            childImageSharp {
              gatsbyImageData(
                quality: 100
                placeholder: DOMINANT_COLOR
                layout: FULL_WIDTH
              )
            }
          }
        }
      }
    }