ReferenceError: process is not defined when importing .tsx files inside MDX file

• mdx-bundler version: ^8.0.1
• node version: v17.3.0
• npm version: Using yarn version 1.22.17

Relevant code or config

// root/pages/blog/[slug].tsx
export default function BlogArticle({ code, frontmatter }: ArticleProps) {
  const { asPath } = useRouter();
  const Component = useMemo(() => getMDXComponent(code), [code]); // error happens here
  return (...);
}
// ...
const getStaticProps: GetStaticProps<ArticleProps, PathDict> = async (ctx) => {
  const { params } = ctx;
  const postsDirectory = path.join(__dirname, "..", "..", "..", "..", "posts");
  const mdxFile = (
    await fs.promises.readFile(path.join(postsDirectory, `${params!.slug}.mdx`))
  ).toString();
  const { code, frontmatter } = await bundleMDX<ArticleFrontmatter>({
    source: mdxFile,
    cwd: postsDirectory,
    xdmOptions(options, frontmatter) {
      options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkMath];
      options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        rehypeKatex,
        rehypeHighlight,
      ];
      return options;
    },
  });
  validateFrontmatter(params!.slug, frontmatter);
  if (!frontmatter.published) {
    return {
      notFound: true,
    };
  }
  const now = new Date().toISOString();
  const finalFrontmatter: ArticleMetadata = {
    ...frontmatter,
    publishedOn: frontmatter.publishedOn ?? now,
    updatedOn: frontmatter.updatedOn ?? null,
  };
  return {
    props: {
      code,
      frontmatter: finalFrontmatter,
    },
  };
};

What you did: I tried to import TSX components into an MDX file.

What happened: I got a client-side error that said ReferenceError: process is not defined.

Problem description: I’m currently building my blog with MDX and NextJS. I’m on the final stages and I saw that I hadn’t configured the part with regards to the path resolution of component imports inside MDX files, so I tried following the docs and used the cwd option in the bundleMDX function, which is set to the directory where the MDX files live. All the imports within the MDX files are also relative to the posts directory. If I remove the imports, the error goes away. I don’t really know why I’m getting this error and I don’t know what I could do to fix it.

[FradSer]

@voluntadpear thanks, it works for me. In my case, I add below in bundleMDX():

esbuildOptions: (options) => {
  options.define = {
    'process.env.__NEXT_TRAILING_SLASH': JSON.stringify(
      process.env.__NEXT_TRAILING_SLASH
    ),
    'process.env.__NEXT_IMAGE_OPTS': JSON.stringify(
      process.env.__NEXT_IMAGE_OPTS
    ),
    'process.env.__NEXT_REACT_ROOT': JSON.stringify(
      process.env.__NEXT_REACT_ROOT
    ),
    'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
      process.env.__NEXT_OPTIMIZE_FONTS
    ),
  };
  return options;
},

Just like https://github.com/FradSer/frad-me/commit/8c8cb421eddadd259769312edc46dd0e8c501fb3 .

[voluntadpear]

I went with the approach suggested by @melosomelo but by using the actual values defined by Next:

options.define = {
      "process.env.__NEXT_TRAILING_SLASH": JSON.stringify(process.env.__NEXT_TRAILING_SLASH),
      "process.env.__NEXT_IMAGE_OPTS": JSON.stringify(process.env.__NEXT_IMAGE_OPTS),
      "process.env.__NEXT_REACT_ROOT": JSON.stringify(process.env.__NEXT_REACT_ROOT),
      "process.env.__NEXT_OPTIMIZE_FONTS": JSON.stringify(process.env.__NEXT_OPTIMIZE_FONTS)
    };

Seems to work so far.