error Building static HTML failed for path "/post/combiningmarriagewithlove" - markdown post

Question

I receive this error message when running gatsby build. My posts are markdown files I source with GraphQL. I don't understand what's the prob.

2:18:43 PM: error Building static HTML failed for path "/post/combiningmarriagewithlove"
2:18:43 PM: 
2:18:43 PM: 
2:18:43 PM:   Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder  .html?invariant=130&args[]=undefined&args[]= for the full message or use the n  on-minified dev environment for full errors and additional helpful warnings.

package.json:

    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.7.0",
    "gatsby-plugin-fontawesome-css": "^1.0.0",
    "gatsby-plugin-sharp": "^2.10.0",
    "gatsby-remark-images": "^3.7.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-transformer-remark": "^2.12.0",
    "gatsby-transformer-sharp": "^2.8.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scroll": "^1.8.1",
    "react-spring": "^8.0.27",
    "react-three-fiber": "^5.3.7",
    "three": "^0.123.0"
  },
  "devDependencies": {
    "env-cmd": "^10.1.0",
    "prettier": "2.1.2"
  },

md file:

---
id: "5"
title: "Combining Marriage with Love"
name: "Surbhi"
date: "2020-01-01"
details: "INTERVIEW and PHOTOGRAPHY by Riin Raanu"
featuredImage: "../images/surbhi.jpeg"
---

India – vibrant, diverse and loud – never stops challenging my perspectives. Like when I realized that an arranged marriage in India is just called marriage, whereas a self-choice marriage is called love ...

Answer 1

Have you tried:

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({node, actions}) => {
    const { createNodeField } = actions

    if(node.internal.type === "MarkdownRemark") {
       const slug = createFilePath({ node, getNode, basePath: `pages` })
        
        createNodeField ({
            node,
            name: 'slug',
            value: slug
        })
    }
}

exports.createPages = async ({ graphql, actions}) => {
    const { createPage } = actions 
    const postTemplate = path.resolve('./src/templates/post.js')
    const res = await graphql(`
    query {
        allMarkdownRemark {
            edges {
                node {
                    fields {
                        slug
                    }
                }
            }
        }
    }
    `).then(res =>{
        if (res.rrors){
            return Promise.reject(res.errors)
        }
    res.data.allMarkdownRemark.edges.forEach((edge) => {
        createPage({
            component: postTemplate,
            path: `/post/${edge.node.fields.slug}`,
            context: {
                slug: edge.node.fields.slug
            }
        })
    })
})
}

Among removing the module, I've added a new slug creation resolver based on the new docs. Run gatsby clean before building the site again.

Answer 2

I got the same error and the way I was able to fix it was by changing one of my style components to the proper react style

style={{maxWidth: "540px"}}

(before it was this:)

style="max-width: 540px;"

This wasn't picked up by my linter (ESLint) but if you don't have a linter installing one might help and it could highlight the problem