title: Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
body: <p>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.</p>
  <p>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.</p>
  <p>The page loads at local server port 8000. The error comes while clicking the <code>Read more</code> button to see the single post. The error seems to be of React.</p>
  <p>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 <code>singlePost</code>.</p>
  <p>Here is the codesandbox link: <a href="https://codesandbox.io/s/gatsby-starter-hello-world-m685p" rel="noreferrer">https://codesandbox.io/s/gatsby-starter-hello-world-m685p</a></p>
  <p>singlePost.js</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql } from &quot;gatsby&quot;
  import { MDXRenderer } from &quot;gatsby-plugin-mdx&quot;
  import { H1 } from &quot;../elements&quot;
  import { Container, Post, FeatureImage, Seo } from &quot;../components&quot;
  
  const singlePost = ({ data }) =&gt; {
    const featureImage = data.mdx.frontmatter.featureImage.childImageSharp.fixed
  
    const seoImage = data.mdx.frontmatter.featureImage.publicURL
  
    return (
      &lt;Container&gt;
        &lt;Seo
          title={data.mdx.frontmatter.title}
          image={seoImage}
          description={data.mdx.frontmatter.excerpt}
        /&gt;
        &lt;FeatureImage fixed={featureImage} /&gt;
        &lt;Post&gt;
          &lt;H1 margin=&quot;0 0 2rem 0&quot;&gt;{data.mdx.frontmatter.title}&lt;/H1&gt;
          &lt;MDXRenderer&gt;{data.mdx.body}&lt;/MDXRenderer&gt;
        &lt;/Post&gt;
      &lt;/Container&gt;
    )
  }
  
  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
              }
            }
          }
        }
      }
    }
  `
  </code></pre>