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

Question

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

我已经搜索了错误。但所有的答案都与 React 应用程序有关。没有与盖茨比有关的答案。所以我无法找出正确的方法来解决它。

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

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

这里是codeandbox链接：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。

---

在问题范围之外，检查组件的导入/导出及其命名，因为这种问题通常与此相关（用于未来的场景/问题）。如果一个组件默认导出，它必须像这样导入：

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

否则需要导入为：

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