mdx-bundler: 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 😅

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 20

Most upvoted comments

@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 on Sep 18, 2021

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

chasemccoy on Sep 19, 2021

Another very important thing, the plugin order matters. I have used rehype-code-titles and rehype-prism-plus. First I have to use rehype-code-titles and then rehype-prism-plug

For example, It fails to build

options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        // Fails to build
        rehypePrism,
        rehypeKatex,
        rehypeCodeTitles,
];

But after reordering the plugins, It works fine.

options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        // Works without any issue
        rehypeCodeTitles,
        rehypePrism,
        rehypeKatex,
];

I hope. It will solve others who are facing the same issue.

thenasim on Sep 18, 2021