Gatsby v5使用MDXRenderer渲染MDX内容报错：Element type is invalid

我正在使用Gatsby构建wiki风格静态页面，依赖版本如下：

"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"
  }

已实现从contents文件夹的MDX文件构建页面，但在首页index.js中用MDXRenderer渲染指定MDX内容时，持续报错：

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));

通过npm init gatsby新建极简项目仍复现错误，仅Gatsby v2及对应依赖可正常运行，查阅文档未找到适配方案，相关代码如下：

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"
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: "contents",
        path: "./src/contents/",
      },
      __key: "contents"
    }
  ]
};

landingPage.mdx #

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

# Test

内容的提问来源于stack exchange，提问作者user23321319