Gatsby MDXRenderer: Error Element type is invalid: expected a string

[MrBen777]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I have been working on a simple wiki style static page using gatsby.

versions:

"dependencies": {
    "@mdx-js/react": "^2.0.0",
    "gatsby": "^5.13.2",
    "gatsby-plugin-mdx": "^5.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

I already have almost everything working as intended, i have pages being created at build time from mdx files in a contents folder using MDXProvider in a template component and passing it children.

but now i have a landing page (index.js) for the website, where i have some custom components, and under the components i want to include some text which would also come from a mdx file in the content folder.
to render it i think i need to use MDXRenderer, but i keep getting the same error, no matter what i try.

error:

throw new Error('Element type is invalid: expected a string (for built-in ' + 'components) or a class/function (for composite components) ' + ("but got: " + (type == null ? type : typeof type) + "." + info));

to try and figure out if there might be some thing interfering i tried creating a very simple project using npm init gatsby but i still get the same error.

this is what i have so far:
index.js

import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      mdx(frontmatter: {type: {eq: "landingPage"}}) {
        body
        frontmatter {
          title
        }
      }
    }
  `)

  return (
    <main>
      <h1>{data.mdx.frontmatter.title}</h1>
      <MDXRenderer>
        {data.mdx.body}
      </MDXRenderer>
    </main>
  )
}

export default IndexPage

export const Head = () => <title>Home Page</title>

gatsby-config.js:

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  siteMetadata: {
    title: `My Gatsby Site`,
    siteUrl: `https://www.yourdomain.tld`
  },
  plugins: [
    "gatsby-plugin-mdx",
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages"
    },
    // Add this new entry for the `contents` directory
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: "contents",
        path: "./src/contents/",
      },
      __key: "contents"
    }
  ]
};

landingPage.mdx:

---
title: Landing
type: landingPage
---

# Test

I have tried going through multiple gatsby/dependency versions, so far the only version that seems to work somewhat is when i use gatsbyv2 and accompanying plugins/dependencies, i am not too sure if i am missing something, i have tried looking through the documentation and i couldn't find anything that applies to my specific use case.

Reproduction Link

https://github.com/MrBen777/gatsby_issue

Steps to Reproduce

Use MDXRenderer to render contents of mdx file

Expected Result

contents show up as expected and formatted correctly

Actual Result

throw new Error('Element type is invalid: expected a string (for built-in ' + 'components) or a class/function (for composite components) ' + ("but got: " + (type == null ? type : typeof type) + "." + info));

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.11.3
  Browsers:
    Edge: Chromium (121.0.2277.83)
  npmPackages:
    gatsby: ^5.13.2 => 5.13.3 
    gatsby-plugin-mdx: ^5.13.1 => 5.13.1 
    gatsby-source-filesystem: ^5.13.1 => 5.13.1 
  npmGlobalPackages:
    gatsby-cli: 5.13.2

Config Flags

No response

[mi-x-lab]

Oops :( I got exactly the same problem.

[datawookie]

@mi-x-lab take a look at the answer to this Stack Overflow question: https://stackoverflow.com/questions/77907325/gatsby-mdxrenderer-error-element-type-is-invalid-expected-a-string.