错误为路径“/post/combiningmarriagewithlove”构建静态 HTML 失败 - 降价帖子答案

【问题标题】：error Building static HTML failed for path "/post/combiningmarriagewithlove" - markdown post错误为路径“/post/combiningmarriagewithlove”构建静态 HTML 失败 - 降价帖子
【发布时间】：2021-02-08 06:51:15
【问题描述】：

我在运行 gatsby build 时收到此错误消息。我的帖子是我使用 GraphQL 获取的降价文件。我不明白这是什么问题。

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 文件：

---
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 ...

【问题讨论】：

你能提供你的gatsby-node.js吗？它在gatsby develop 下工作吗？你也可以分享你的模板文件吗？

标签： markdown gatsby gatsby-remark-image

【解决方案1】：

你试过了吗：

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
            }
        })
    })
})
}

在删除 module 的过程中，我添加了一个基于 new docs 的新 slug 创建解析器。在再次构建站点之前运行gatsby clean。

【讨论】：

【解决方案2】：

我遇到了同样的错误，我能够修复它的方法是将我的一个样式组件更改为正确的反应样式

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

（之前是这样的：）

style="max-width: 540px;"

这不是我的 linter (ESLint) 发现的，但如果你没有 linter，安装一个可能会有所帮助，它可能会突出问题

【讨论】：