Cannot read property 'default' of undefined at getMDXComponent. Works great in local, get error when deploy to Vercel

[Dalton Mabery]

• mdx-bundler version: 8.0.1
• node version: 16.13.1
• npm version: 8.1.2

Relevant code or config

export const getStaticProps = async ({params}) => {
  const { items } = await client.getEntries({
    content_type: 'bookNotes',
    'fields.slug': params.slug
  })


  const {code}  = await bundleMDX({
    source: items[0].fields.content2
  })

  
  console.log(code)

  return {
    props: {
      post: items[0],
      code
    },
    revalidate: 1
  }
}

  const PostPage = ({ post, code }) => {
    const Component = getMDXComponent(code)
      return (
      <>
                <MarkdownPostDisplay title={post.fields.title} description={post.fields.description} date={post.sys.createdAt} content={<Component className="text-grey-900 prose-dark"  components={{SideNote}}/>}/>
        
              </>   
      )
  }

What you did: Tried adding the Component to render by itself, not as a prop and that didn't work. I tried useMemo at first but deleted it to see if that was causing the error. I also tried setting a default value in node-modules because getMdxComponent returns mdxExport.default. So somehow that isn't getting any data when Vercel is building the page.

What happened:

I added mdx-bundler to display a string of Markdown from a CMS. It works great in local development environment, but I get the following error whenever I try to deploy on Vercel.

Error occurred prerendering page "/essays/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error
--
08:28:05.452 | TypeError: Cannot read property 'default' of undefined
08:28:05.452 | at getMDXComponent (/vercel/path0/node_modules/mdx-bundler/dist/client.js:35:20)
08:28:05.452 | at /vercel/path0/.next/server/chunks/994.js:73:147
08:28:05.452 | at Object.Ja [as useMemo] (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:27:240)
08:28:05.453 | at Object.exports.useMemo (/vercel/path0/node_modules/react/cjs/react.production.min.js:23:113)
08:28:05.453 | at PostPage (/vercel/path0/.next/server/chunks/994.js:73:68)
08:28:05.453 | at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
08:28:05.453 | at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
08:28:05.453 | at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
08:28:05.453 | at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
08:28:05.453 | at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)

Reproduction repository:

Problem description: Vercel is throwing an error while building a static page because the default property on getMdxComponent because it is evaluating to undefined during the build process.

Suggested solution: The most obvious solution was to set a default value for getMdxComponent and that didn't work. I also tried passing in a string directly as the source instead of calling and API and that didn't work either.

[Joe H]

+1, driving me crazy, same problem

[Dalton Mabery]

I ended up having to check if my props were empty, and if so, render an empty div that didn't call getMDXComponent. That seemed to fix the problem.

Ending up going with Markdown to JSX instead though eventually. It achieved the same goal for me, but was easier to use.

[Joe H]

ah, what a great feeling to spend all saturday fighting a bug and then fixing it first thing sunday morning :) :) thanks for your help

let MDXComponent = useMemo(() => {
    if (code) {
     return getMDXComponent(code);
    }
return <div/>
  }, [code]);

got this weird little thing at the top now and it all builds. will check out markdown to jsx, mdx + next.js, despite the great work of ppl like this library's authors, still feels like a headache much of the time