./node_modules/react-dom/cjs/react-dom.development.js:25058 中的函数 createFiberFromTypeAndProps 出错

Question

我正在学习使用 YouTube 教程创建 gatsby 博客网站。我已按照教程中所示的确切步骤进行操作。存在与 graphql 查询格式相关的错误。已解决。

我已经搜索了错误。但所有的答案都与 React 应用有关。没有与盖茨比相关的答案。所以一直想不出正确的解决方法。

页面在本地服务器端口 8000 加载。单击 Read more 按钮查看单个 post 时出现错误。错误似乎是 React.

元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。检查 singlePost.

的渲染方法

这是代码框 link: https://codesandbox.io/s/gatsby-starter-hello-world-m685p

singlePost.js

import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { H1 } from "../elements"
import { Container, Post, FeatureImage, Seo } from "../components"

const singlePost = ({ data }) => {
  const featureImage = data.mdx.frontmatter.featureImage.childImageSharp.fixed

  const seoImage = data.mdx.frontmatter.featureImage.publicURL

  return (
    <Container>
      <Seo
        title={data.mdx.frontmatter.title}
        image={seoImage}
        description={data.mdx.frontmatter.excerpt}
      />
      <FeatureImage fixed={featureImage} />
      <Post>
        <H1 margin="0 0 2rem 0">{data.mdx.frontmatter.title}</H1>
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </Post>
    </Container>
  )
}

export default singlePost

export const pageQuery = graphql`
  query SinglePostQuery($id: String!) {
    mdx(id: { eq: $id }) {
      body
      frontmatter {
        date
        excerpt
        slug
        title
        featureImage {
          childImageSharp {
            fixed {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

Answer 1

您的组件必须命名为 SinglePost 而不是 singlePost（注意大小写），因此：

import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { H1 } from "../elements"
import { Container, Post, FeatureImage, Seo } from "../components"

const SinglePost = ({ data }) => {
  const featureImage = data.mdx.frontmatter.featureImage.childImageSharp.fixed

  const seoImage = data.mdx.frontmatter.featureImage.publicURL

  return (
    <Container>
      <Seo
        title={data.mdx.frontmatter.title}
        image={seoImage}
        description={data.mdx.frontmatter.excerpt}
      />
      <FeatureImage fixed={featureImage} />
      <Post>
        <H1 margin="0 0 2rem 0">{data.mdx.frontmatter.title}</H1>
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </Post>
    </Container>
  )
}

export default singlePost

export const pageQuery = graphql`
  query SinglePostQuery($id: String!) {
    mdx(id: { eq: $id }) {
      body
      frontmatter {
        date
        excerpt
        slug
        title
        featureImage {
          childImageSharp {
            fixed {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

所有 React 组件名称必须以大写字母开头。否则，它将被视为内置元素，如 <div> 或 <span>（或另一个 HTML 标签）。在 JSX 中，渲染以小写字母开头的组件会编译成 React。

在问题范围之外，检查组件的importation/exportation和它的命名，因为这种问题通常与那个有关（对于未来scenarios/issues）。如果组件默认导出，则必须像这样导入：

import DefaultComponent from '../path/to/default/component'

否则需要导入为：

import { NonDefaultComponent} from '../path/to/non-default/component'

./node_modules/react-dom/cjs/react-dom.development.js:25058 中的函数 createFiberFromTypeAndProps 出错

Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

javascript

reactjs

graphql

gatsby