Having issues with MDXRenderer

[mramirez0610]

Don't really know what's going on. I'm trying to display some data from an MDX file "about.mdx" but I'm running into an error with MDXRenderer. If i replace the MDXRenderer tag with something else, the data displays fine; but the moment MDXRenderer is in the mix it breaks and gives me a run time error:

"Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:28439

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 AboutPage."

import * as React from "react";
import * as styles from "../styles/main.module.scss";
import Layout from "../layout/layout";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { MDXProvider } from "@mdx-js/react";

export const query = graphql`
  query {
    allMdx(filter: { fields: { slug: { eq: "/content/about/" } } }) {
      nodes {
        body
        frontmatter {
          title
        }
      }
    }
  }
`;

const AboutPage = ({
  data: {
    allMdx: { nodes },
  },
}) => {
  const mdx = nodes[0]; // Get the first MDX node

  if (!mdx) {
    return <div>No MDX node found</div>;
  }

  return (
    <Layout>
      <MDXProvider components={{}}>
        <h1> {mdx.frontmatter.title} </h1>
        <MDXRenderer> {mdx.body} </MDXRenderer>
      </MDXProvider>
    </Layout>
  );
};

export default AboutPage;

Here's my code. I have no idea what's going on. I have my gatsby-config file configured fine, here it is.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  siteMetadata: {
    title: `n413-gatsby`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
    "gatsby-plugin-sass",
    "gatsby-plugin-mdx",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/mdx/`,
      },
      __key: "pages",
    },
  ],
};

This is also the first time I've ever reached out for help over github, so please let me know if you need more information. Thanks in advance!

[violy]

Hello Marco,

first, what is your packages and Gatsby versions ? Could you share your package.json ?
And where is your AboutPage ? In my test, basically, I put a AboutPage.jsx inside the static /src/pages/ directory, using Gatsby File Api.

Then, when I try to test your GraphQL query, with up-to-date gatsby & mdx plugin versions, the query fails with this message :
Field "fields" is not defined by type "MdxFilterInput". → This is probably because of old versions and syntax.

You should use another filter to query your data.
Using frontmatter and a slug prop, you can do this

{
  mdx(frontmatter: {slug: {eq: "about"}}) {
    body
    frontmatter {
      title
    }
  }
}

Have you try to run your query in GraphiQL, does it run ? Not on my machine !

Arthur.