Components referenced after running compiled code

[guilherme-marin]

What I'm trying to achieve

I'm trying to run a MDX string which has a component in it. This component contains a reference to a next/link. I'm trying to follow using on-demand mdxjs instructions.

Here is the component:

import Link from 'next/link';
import React from 'react'

const Component1 = () => {    
  return (
    <div>
        <Link href={"/"}>
          I&apos;m a LINK
        </Link>        
    </div>
  )
}

export default Component1

Here is the Page that tries to compile and run:

import { useState, useEffect, Fragment } from "react";
//import * as runtime from 'react/jsx-runtime' // Production.
import * as runtime from "react/jsx-dev-runtime"; // Development.
import { compile, run } from "@mdx-js/mdx";
import Component1 from "../components/SimpleComponent";
import type { MDXModule } from "mdx/types";

const stringMDX = `
<Component1 />
`;

export default function Page({ code }: any) {
  const [mdxModule, setMdxModule] = useState<MDXModule>();
  const Content = mdxModule ? mdxModule?.default : Fragment;
  useEffect(() => {
    (async () => {
      setMdxModule(await run(code, runtime));
    })();
  }, [code]);


  return (
    <>
      {code && <Content components={{ Component1 }} />}
    </>
  );
}
export async function getStaticProps() {
  const code = String(
    await compile(stringMDX, {
      outputFormat: "function-body",
      development: process.env.NODE_ENV === "production" ? false : true,
    })
  );
  return { props: { code } };
}

What happened

Client side error after build, however, while in dev, the error does not appear, according to the attached codesandbox.

What I was expecting

Navigation to work on production as it does in development mode. Am I missing something?

(PROD) Deployment Link: https://nex-link-clientside.vercel.app/
(DEV) Codesandbox Link: next-link-clientside

[wooorm]

I dunno who owns mdx-poc or where the code lives? What is it?

[guilherme-marin]

I'm sorry, I forgot to add the repo: https://github.com/sync-adm/mdx-poc.

[wooorm]

Ok, you have a repo that includes a ton of code. Unrelated dependencies? A month old fork? Now what? Spend time framing your question. Remove everything that isn’t needed. https://mdxjs.com/community/support/

[guilherme-marin]

@wooorm, I tried to add more context to my question, thanks for your attention to this thread so far.

[wooorm]

You get an error due to a difference between development and production.
This is explained in our guide: https://mdxjs.com/guides/mdx-on-demand/#nextjs-example.
To solve the error you see, follow that guide, and explicitly set the development option passed to compile.