Using the compiler in React Server Components (in Next.js 13)

[joulev]

How to make the compiler work for React Server Components? I'm using Next.js 13's new app directory, but I think this also applies to RSC in general.

Right now, with this (and some webpack configuration to import .mdx files as raw strings),

This is a test **Markdown** file

async function getContent() {
  const rawContent = await import(`./test.mdx`).then(x => x.default);
  return rawContent;
}

export default async function Page() {
  const content = await getContent();
  return <div>{content}</div> /* not parsing yet for inspection purposes */;
}

I can get the Markdown file to be displayed raw:

But when I add the compiler in,

import { compile } from "@mdx-js/mdx";

async function getContent() {
  const rawContent = await import(`./test.mdx`).then(x => x.default);
  const content = String(await compile(rawContent, { outputFormat: "function-body" }));
  return content;
}

export default async function Page() {
  const content = await getContent();
  return <div>{content}</div> /* not parsing yet for inspection purposes */;
}

a very mysterious error message appears:

How to resolve this error and use the compiler in React Server Components in general?

[wooorm]

I think this is about Rich-Harris/periscopic#10, which was solved more than a year ago. I’m guessing you are not using the latest @mdx-js/mdx.

[joulev]

Can you remove the entire exports object from package.json of periscopic locally?

No it didn't work.

[wooorm]

Then I need a small reproduction to help you.
It sounds like a bug in the particular tools that Next.js 13 introduces though. It should support periscopic. It’s not a bug in this project.

[joulev]

Hi, you can use this to reproduce the problem: https://github.com/joulev/debug/tree/nextjs-42534

[wooorm]

It does solve the issue. Either a) removing the exports, b) renaming import to default, or c) using just a string ("exports": "./src/index.js",).

However, the problem persists as it exists in 3 packages: periscopic, estree-walker, and is-reference.
You can (and likely should?) raise this issue with Next.js folks. They should likely set the import condition and so support import in export maps.
You can also PR to the three projects. I’m guessing @Rich-Harris would appreciate your help here, because Node.js’ docs say that there should always be a default set: https://nodejs.org/api/packages.html#conditional-exports.
In the mean time, you could perhaps use patch-package?

[joulev]

Thank you. Issues raised at Next.js: vercel/next.js#42534, although I'm not sure if I could explain the bug clearly enough. Since there are likely other packages that may crash too (other than the three you mentioned), I think it's best to let the Next.js team fix this once and for all.