Build failed when adding custom remark/rehype plugin

• mdx-bundler version: 6.0.1
• node version: 14.17.0
• npm version: 6.14.13
• esbuild version: 0.12.25
• platform: windows 11

Relevant code or config

async function getFileRenderBySlug(type: string, slug: string) {
  const file_path = path.join(BLOG_FOLDER_PATH, type, `${slug}.mdx`);

  if (checkIfPathExists(file_path) === false) {
    throw new Error(`${file_path} file not found`);
  }

  const mdxSource = fs.readFileSync(file_path, "utf8");

  if (process.platform === "win32") {
    process.env.ESBUILD_BINARY_PATH = path.join(
      ROOT,
      "node_modules",
      "esbuild",
      "esbuild.exe"
    );
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(
      ROOT,
      "node_modules",
      "esbuild",
      "bin",
      "esbuild"
    );
  }

  const result = await bundleMDX(mdxSource, {
    cwd: path.join(ROOT, COMPONENTS),
    xdmOptions(options) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        // if I remove this plugins it builds without any issue
        remarkGfm,
        remarkToc,
        remarkMath,
      ];
      options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        // if I remove this plugins it builds without any issue
        rehypePrism,
        rehypeKatex,
      ];

      return options;
    },
  });

  const { code, frontmatter } = result;

  return {
    toRender: code,
    data: {
      readingTime: readingTime(code),
      ...(frontmatter as MarkdownFrontMatter),
    },
  };
}

Error Output:

Server Error
Error: Build failed with 1 error:
_mdx_bundler_entry_point-1f92ed01-7bb4-4697-9847-570c4c57cf02.mdx:0:0: error: [plugin: esbuild-xdm] 

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack
failureErrorWithLog
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (1478:15)
<unknown>
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (1136:28)
runOnEndCallbacks
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (926:63)
buildResponseToResult
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (1134:7)
<unknown>
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (1243:14)
<unknown>
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (614:9)
handleIncomingPacket
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (711:9)
Socket.readFromStdout
file:///E:/projects/next-ts-blog-starter/node_modules/esbuild/lib/main.js (581:7)
Socket.emit
events.js (376:20)
Socket.emit
domain.js (470:12)

When I am adding my custom remark/rehype plugins, it fails to build. But if I remove all my custom remark/rehype plugins it builds without any issue. Don’t know where I am doing wrong. Currently moved to next-mdx-remote 😅

[chasemccoy]

@wooorm 🤦‍♂️ I figured it out. I forgot to change to named exports for my unified dependencies:

I had this:

import visit from 'unist-util-visit'
import toc from 'mdast-util-toc'
import toHast from 'mdast-util-to-hast'
import toHtml from 'hast-util-to-html'

I needed this:

import {visit} from 'unist-util-visit'
import {toc} from 'mdast-util-toc'
import {toHast} from 'mdast-util-to-hast'
import {toHtml} from 'hast-util-to-html'

Such a small detail that I completely overlooked it. Thank you again for your help, your patience, and for all the awesome work you do!

[chasemccoy]

Yeah, this error getting swallowed up somewhere made it really hard to debug this. But anyway, I think we can close this issue now!