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

Question

我正在学习使用 YouTube 教程创建一个 gatsby 博客网站。我已按照教程中所示的确切步骤进行操作。存在与 graphql 查询格式相关的错误。解决了。
我已经搜索了错误。但所有的答案都与 React 应用程序有关。没有与 Gatsby 有关的答案。所以我无法找出解决它的正确方法。
该页面在本地服务器端口 8000 加载。单击 Read more 时出现错误按钮查看单个帖子。错误似乎是 React 的。
元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。查看singlePost的渲染方法.
这是代码框链接: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。

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

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

否则，需要将其导入为:

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