Imports/exports in function-body

[hahnbeelee]

I'm working on a Next.js project that uses MDX2. I'm working on refactoring it from using local mdx files/webpack to using MDX On Demand or Hashicorp's next-mdx-remote. My project is highly dependent on imports/exports because I utilize remark/rehype plugins to create variables and export a default Layout.

I tried using baseUrl but I got the following error:

Failed to fetch dynamically imported module: file:///Users/user/mint/client/src/layouts/ContentsLayout.tsx

Here's my source code/attempt
For context file:///Users/user/mint/client/src/layouts/ContentsLayout.tsx is the correct location and I tried with and without the '.tsx' and I still got the same error.

[hahnbeelee]

Ways I've attempted to solve this problem:

1. next-mdx-remote - It says in their readme that they don't support imports/exports.
2. Removing all of my imports and using compile/run with MDXProvider. This simply didn't work. It doesn't seem like MDXProvider wasn't successfully giving the component variable to the children. Is there a way to get this to work? It's important to note that this will solve my problem for imports but not my export.

Ideas I have to solve this problem:

1. I create variables using plugins. Is there a way for me to expose those variables in a parent? then I can wrap my MDXContent with the Layout I want and inject the variables into my Layout so that I can get it looking the way I want to. (For context, one of the variables I generate is information for a table of contents which I create by using a custom remark plugin)
2. I have my tsconfig set up so that '@/' aliases to my 'src' folder. Is there a way I can utilize that to make imports work?
3. I'm only ever running and compiling mdx within my client/src/pages/_sites/[site] folder. Is this precondition something I can leverage to make imports work?

[hahnbeelee]

According to this thread it's a nontrivial problem, but I figured there's a reason why options.useDynamicImport and options.baseUrl exist and I'm just doing something wrong?

[hahnbeelee]

Ooo I did some more searching and found this - I shall try this out..,.

[wooorm]

If you are going to run MDX code on the client in a browser, without a bundler, then you get actual imports. The browser will fetch those files. Your server will need to send those files back.

Sort of how it used to be 10 years ago: you had different JS files on a server, and you had script tags in an HTML page. The browser then got those files from the server for you.

The URL must also reflect that. An actual URL to a file on a website where the code runs from.

You can also run code inside Node.js. Then the files can exist on that server locally too. And they can be imported. Node.js can access file://.... But browsers can’t.

That’s why options.useDynamicImport and options.baseURL exist. To allow for actual things being imported over networks or from the same file system.

However, if all your things are TypeScript, and you’re using tools to bundle all of that, that interferes. The browser doesn’t understand TypeScript.

Removing all of my imports and using compile/run with MDXProvider.

This should work. Perhaps you weren’t passing the provider correctly?

Note that exports (except export … from, which is also an import) are fine by default already. Your plugins injecting exports should work.

[wooorm]

Cool! Let me know if you need help with that.

Also: you can pass props and components in. You probably don't need a provider!

[hahnbeelee]

Thanks! I might need to take you up on that offer.

1. I tried injecting components directly into my Content component created with compile/run (source code) and directly inserted components,

export default function Page({ stringifiedMdxSource, stringifiedData }: PageProps) {
  const router = useRouter();
  const [mdxModule, setMdxModule] = useState<any>();
  useEffect(() => {
      if (stringifiedMdxSource == null) return;
      const mdxSource = JSON.parse(stringifiedMdxSource) as any;
      (async () => {
        setMdxModule(await run(mdxSource.value, runtime));
      })();
    }, [stringifiedMdxSource]);
    return <Content components={{ ContentsLayout, Link }} />;
}

but I got "ContentsLayout is not defined".

2. I tried with next-mdx-remote and although I was able to bypass the above error, it wasn't able to detect a variable I exported using another remark plugin
   

[wooorm]

If ContentsLayout is undefined, then that seems unrelated to this? That seems more of a question for Next.js or so on how to get a layout into a page?

The code seems a bit different from the on-demand guide. I am particularly worried about your Content being undefined to start?

Why not something like:

  const [mdxModule, setMdxModule] = useState()
  const Content = mdxModule ? mdxModule.default : Fragment
  const components = {h1: MyHeading1, Video} // Put components in this.

  useEffect(() => {
    ;(async () => {
      setMdxModule(await run(code, runtime))
    })()
  }, [code])

  return <Content components={components} />

[hahnbeelee]

Sorry about not being super clear. The ContentsLayout matters because It's the one component I'm exporting from my mdx files. Here's some more context. I believe my last code snippet wasn't extremely clear. I tried shortening it for simplicity but missed a few lines. I pretty much exactly have the same code as the one you provided.

export default function Page({ stringifiedMdxSource, stringifiedData }: PageProps) {
  const [mdxModule, setMdxModule] = useState<any>();
  const Content = mdxModule ? mdxModule?.default : Fragment;

  useEffect(() => {
    if (stringifiedMdxSource == null) return;
    const mdxSource = JSON.parse(stringifiedMdxSource) as any;
    (async () => {
      setMdxModule(await run(mdxSource.value, runtime));
    })();
  }, [stringifiedMdxSource]);
  return <Content components={{ ContentsLayout, Link }} />;
}

stringifiedMdxSource is generated by:

const getMdxSource = async (pageContents: string) => {
  return compile(pageContents, {
    outputFormat: 'function-body',
    remarkPlugins: [...],
    rehypePlugins: [
     ...
      withLayouts,
    ],
    format: 'mdx',
  });
};

And for context this is my withLayouts rehype plugin

Also: you can pass props and components in. You probably don't need a provider!

Essentially this isn't working for me and I'm not sure why. This is why I abandoned this route before...

[hahnbeelee]

I figured it out! The solution ended up being:

1. Remove all imports
2. Use hashicorp's next-mdx-remote to feed in components and variables
   Here's the source code.