I am learning to create a gatsby blog website with a YouTube tutorial. I have followed the exact steps as shown in the tutorials. There were errors that were related to graphql query format. which were solved.
I have searched for the error. But all the answers were related to react app. There was no answers related to gatsby. So I was unable to figure out the right way to solve it.
The page loads at local server port 8000. The error es while clicking the Read more
button to see the single post. The error seems to be of React.
Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports. Check the render method of singlePost
.
Here is the codesandbox link:
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 "../ponents"
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
}
}
}
}
}
}
`
I am learning to create a gatsby blog website with a YouTube tutorial. I have followed the exact steps as shown in the tutorials. There were errors that were related to graphql query format. which were solved.
I have searched for the error. But all the answers were related to react app. There was no answers related to gatsby. So I was unable to figure out the right way to solve it.
The page loads at local server port 8000. The error es while clicking the Read more
button to see the single post. The error seems to be of React.
Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports. Check the render method of singlePost
.
Here is the codesandbox 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 "../ponents"
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
}
}
}
}
}
}
`
Share
Improve this question
asked May 23, 2021 at 8:31
tru_shartru_shar
1473 silver badges15 bronze badges
1 Answer
Reset to default 6Your ponent must be named SinglePost
instead of singlePost
(notice the capitalization), so:
import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { H1 } from "../elements"
import { Container, Post, FeatureImage, Seo } from "../ponents"
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
}
}
}
}
}
}
`
All React ponent names must start with a capital letter. Otherwise, it will be treated as a built-in element like a <div>
or a <span>
(or another HTML tag). In JSX, rendering a ponent that begins with a lowercase letter piles down to React.
Outside the scope of the question, check the importation/exportation of the ponents and it's naming, because this kind of issue is usually related to that (for future scenarios/issues). If a ponent is exported as default, it must be imported like:
import DefaultComponent from '../path/to/default/ponent'
Otherwise, it needs to be imported as:
import { NonDefaultComponent} from '../path/to/non-default/ponent'