Build breaks when used in a React component

[rafiwardak2003]

I am using this in a React component in Astro, and it renders the diagram and everything works fine locally. But when building for production, vitejs throws the following error:

#17 64.89 18:39:42 [ERROR] [vite] x Build failed in 8.36s
#17 65.05 node_modules/@beoe/rehype-code-hook/dist/index.js (6:9): "serialize" is not exported by "__vite-browser-external", imported by "node_modules/@beoe/rehype-code-hook/dist/index.js".
#17 65.05 file: /build/node_modules/@beoe/rehype-code-hook/dist/index.js:6:9
#17 65.05 
#17 65.05 4: // Other options: askorama/seqproto, pouya-eghbali/sia, deterministic-object-hash
#17 65.05 5: // I haven't benchmarked it
#17 65.05 6: import { serialize } from "node:v8";
#17 65.05             ^
#17 65.05 7: export { waitFor } from "./waitFor.js";
#17 65.05 8: function isNode(node) {
#17 65.05 
#17 65.05   Stack trace:
#17 65.05     at getRollupError (file:///build/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
#17 65.05     at Module.error (file:///build/node_modules/rollup/dist/es/shared/node-entry.js:14844:16)
#17 65.05     at ModuleScope.findVariable (file:///build/node_modules/rollup/dist/es/shared/node-entry.js:13192:39)
#17 65.05     at FunctionBodyScope.findVariable (file:///build/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
#17 65.05     at FunctionBodyScope.findVariable (file:///build/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)

[stereobooster]

I have one project which uses React + Astro:

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import react from "@astrojs/react";
import robotsTxt from "astro-robots-txt";
import { rehypeGraphviz } from "@beoe/rehype-graphviz";

// https://astro.build/config
export default defineConfig({
  site: "",
  defaultLocale: "en",
  redirects: {},
  integrations: [
    starlight({}),
    react(),
    robotsTxt(),
  ],
  markdown: {
    remarkPlugins: [
      remarkMath,
      
    ],
    rehypePlugins: [rehypeKatex, [rehypeGraphviz, { class: "timeline" }]],
  },
});

In my case it works without issues. Can you provide reproducible example?

[rafiwardak2003]

I forgot to mention I am using it with RemarkJS since it's a React component. It's dynamic markdown coming from the server.

So something similar to this works until you add the mermaid plugin, then it won't compile:

import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeSanitize)
  .use(rehypeStringify)
  .process('# Hello, Neptune!')

console.log(String(file))

[stereobooster]

You mean you use remark on the client-side? Those plugins won't work on the client - they were built for the server.

rehype-mermaid probably will work.

I don't have a need for this functionality. PRs are welcome though

[rafiwardak2003]

Okay, I will take a look at the other plugin or see if I can create a PR for this.

And yes, the component is rendered in the client side. The other remark plugins worked, just not this one. Thanks for the help.