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

我在运行 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.

包.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 ...
stack overflow error Building static HTML failed for path "/post/combiningmarriagewithlove" - markdown post
原文答案

答案:

作者头像

你有没有尝试过:

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

作者头像

我得到了相同的错误,并且通过将我的一种样式组件之一更改为适当的React样式,我能够解决它的解决方法

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

(在这个之前:)

style="max-width: 540px;"

这不是我的林格(ESLINT)捡起的,但是如果您没有安装的林格,则可能会有所帮助,并且可以突出显示问题