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 comes 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 components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component 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 "../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
}
}
}
}
}
}
`
