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

Question

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

我已经搜索了错误。但所有答案都与react app有关。没有与盖茨比相关的答案。所以我无法找到解决问题的正确方法。

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

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

这是codesandbox链接：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 组件名称都必须以大写字母开头。否则，它将被视为内置元素，如 a<div>或 a <span>（或另一个 HTML 标签）。在 JSX 中，渲染以小写字母开头的组件会编译为 React。

在问题的范围之外，检查组件的导入/导出及其命名，因为此类问题通常与此相关（对于未来的场景/问题）。如果默认导出组件，则必须将其导入，如下所示：

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

否则，需要将其导入为：

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