Element type is invalid since Migrated from V3 to V5

[MrDesjardins]

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 am migrating from Gatsby version 3 to 5 and I have one a single of my page a runtime error

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 BlogArticle.

BlogArticle is very simple (and was working in version 3):

const components = {
  pre: CodeBlock,
  TocAzureContainerSeries,
};
const BlogPost = (queryInfo): JSX.Element => {
  const data = queryInfo.data;
  const context = queryInfo.pageContext;
  return (
    <Layout
      pageTitle={data.mdx.frontmatter.title}
      totalPages={context.totalPages}
    >
      <div className={blogPostContainer}>
        <p className={blogPostDate}>Posted on: {data.mdx.frontmatter.date}</p>
        <MDXProvider components={components}>
          <MDXRenderer>{data.mdx.body}</MDXRenderer>
        </MDXProvider>
      </div>
    </Layout>
  );
};

/**
 * the $id is provided in the `context` of the gatsby-node.js `createPages` function
 */
export const query = graphql`
  query ($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
      body
    }
  }
`;
export default BlogPost;

I tried to move the export default at the function that renders the BlogPost and rename the function to match the file name. In either case, it keeps having the same runtime issue.

Reproduction Link

I do not

Steps to Reproduce

1. npm run develop
2. Go to that particular page

One unhandled runtime error found in your files. See the list below to fix it:


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 `BlogArticle`.

./node_modules/react-dom/cjs/react-dom.development.js:28439

Expected Result

I expect the blog post to render

Actual Result

I have a GatsbyJS error pagehave

Environment

Windows using WSL:

  System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Languages:
    Python: 3.9.12 - /home/misterp2d/miniconda3/bin/python
  npmPackages:
    gatsby: ^5.2.0 => 5.2.0
    gatsby-plugin-feed-mdx: ^1.1.0 => 1.1.0
    gatsby-plugin-ffmpeg: ^0.6.0 => 0.6.0
    gatsby-plugin-google-analytics: ^5.2.0 => 5.2.0
    gatsby-plugin-image: ^3.2.0 => 3.2.0
    gatsby-plugin-mdx: ^5.2.0 => 5.2.0
    gatsby-plugin-sharp: ^5.2.0 => 5.2.0
    gatsby-plugin-styled-components: ^6.2.0 => 6.2.0
    gatsby-remark-copy-linked-files: ^6.2.0 => 6.2.0
    gatsby-remark-gifs: ^1.1.0 => 1.1.0
    gatsby-remark-gifs-to-videos: ^1.0.0-beta.5 => 1.0.0-beta.5
    gatsby-remark-images: ^7.2.0 => 7.2.0
    gatsby-remark-prismjs: ^7.2.0 => 7.2.0
    gatsby-remark-static-images: ^1.2.1 => 1.2.1
    gatsby-remark-video: ^1.2.5 => 1.2.5
    gatsby-remark-videos: ^0.5.2 => 0.5.2
    gatsby-source-filesystem: ^5.2.0 => 5.2.0
    gatsby-transformer-remark: ^6.2.0 => 6.2.0
    gatsby-transformer-sharp: ^5.2.0 => 5.2.0

Config Flags

No

[ghost]

Use the children prop described in this official migration tutorial.

I have the same problem, the but got: undefined error will gone when you comment out MDXRenderer, i think gatsby-plugin-mdx does not export this component anymore in version 5.

[MrDesjardins]

Thank you @lorem314. That portion was missing since the migration was written for the Plugin and not for Gatsby! Now I get it, it is a little scattered :)

For future people, once I removed the MDXRenderer, I suddenly was flooded by ERROR #gatsby-plugin-mdx_10003, which Google cannot find any result. The unfolded error was:

ERROR #gatsby-plugin-mdx_10003  PLUGIN

Invalid AST. Parsed source code did not return valid output.

Template:
/mnt/c/code/patrickdesjardins/src/templates/BlogArticle.tsx

It does not give much more. Using --verbose.

After reading more into the documentation, which is confusing to figure out what is available for version 5, I found out that removing MDXRenderer is fine, but you still need to have MDXProvider if you want to inject custom components. After all these changes, I have still the error:

 ERROR #gatsby-plugin-mdx_10003  PLUGIN

Invalid AST. Parsed source code did not return valid output.

Template:
/mnt/c/code/patrickdesjardins/src/templates/BlogArticle.tsx

Code is now looking for this component:

import * as React from "react";
import { graphql } from "gatsby";
import Layout from "../layout/layout";
import CodeBlock from "../components/CodeBlock";
import { TocAzureContainerSeries } from "../blogcomponents/TocAzureContainerSeries";
import * as containerStyles from "../layout/layout.module.css";
import { MDXProvider } from "@mdx-js/react";
const components = {
  pre: CodeBlock,
  TocAzureContainerSeries,
};
export default function BlogArticle(queryInfo): JSX.Element {
  const data = queryInfo.data;
  const context = queryInfo.pageContext;
  return (
    <Layout
      pageTitle={data.mdx.frontmatter.title}
      totalPages={context.totalPages}
    >
      <div className={containerStyles.blogPostContainer}>
        <p className={containerStyles.blogPostDate}>
          Posted on: {data.mdx.frontmatter.date}
        </p>
        <MDXProvider components={components}>{queryInfo.children}</MDXProvider>
      </div>
    </Layout>
  );
}

/**
 * the $id is provided in the `context` of the gatsby-node.js `createPages` function
 */
export const query = graphql`
  query ($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
    }
  }
`;

The gatsby.node.js configuration has changed with:

  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              date(formatString: "YYYY-MM-DD")
            }
            internal {
              contentFilePath
            }
          }
        }
      }
    }
  `);
//.. snip
    createPage({
      path: node.fields.slug /*defined in `onCreateNode`*/,
      component: `${path.resolve(`./src/templates/BlogArticle.tsx`)}?__contentFilePath=${node.internal.contentFilePath}`,
      context: { id: node.id, totalPages: totalPageCount },
    });

Still stuck :\

[geocine]

What fix di you end up with @MrDesjardins ?

[MrDesjardins]

What fix did you end up with @MrDesjardins ?

After many evenings and other issues, I had to roll back all my changes. I am still on V3. The future is to migrate to another platform than Gatsby, as it does not seem appropriate for blogging with too much friction between versions.