rehypeMermaid

[abernier]

Providing mermaid support

[vercel[bot]]

@abernier is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

[abernier]

@timlrx I've tried this naively but get this "Cannot process MDX file with esbuild [plugin @mdx-js/esbuild]" error:

$ npm run dev

> tailwind-nextjs-starter-blog@2.2.0 dev
> cross-env INIT_CWD=$PWD next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
Contentlayer config change detected. Updating type definitions and data...
✘ [ERROR] Cannot process MDX file with esbuild [plugin @mdx-js/esbuild]

    _mdx_bundler_entry_point-59ff41e3-d690-4d8c-acd7-1954a963f938.mdx:0:0:
      0 │ ---
        ╵ ^

Error: Found 1 problems in 13 documents.

 └── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.

     • "blog/code-sample.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-59ff41e3-d690-4d8c-acd7-1954a963f938.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] Cannot process MDX file with esbuild

successCallback /Users/abernier/Sites/ffffffffspace.github.io/.contentlayer
(node:46008) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Local search index generated...
SourceFetchDataError: {
  "_tag": "HandledFetchDataError"
}
 ✓ Ready in 4.7s
 ○ Compiling / ...
 ✓ Compiled / in 3.6s (1131 modules)
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET / 200 in 3976ms

do you have an idea?

[timlrx]

Works for me, but you need to install playwright i.e. npx playwright-core install --with-deps chromium. I would prefer to just let the user opt-in and avoid having install playwright by default. Happy to add this under the FAQ though.

[abernier]

Indeed it worked also for me after npx playwright-core install --with-deps chromium but didn't understand why... can you explain briefly?

[timlrx]

There are two ways that mermaid can be used via the browser or node. Mermaid is a pretty large dependency so this plugin does not load mermaid.js on the browser side but uses playwright to render the code as an svg or png and inline it with the generated HTML.

[eavan5]

Works for me, but you need to install playwright i.e. npx playwright-core install --with-deps chromium. I would prefer to just let the user opt-in and avoid having install playwright by default. Happy to add this under the FAQ though.

However, deploying via vercel doesn't seem to work, because the playwrirght requires a specific system

[timlrx]

Works for me, but you need to install playwright i.e. npx playwright-core install --with-deps chromium. I would prefer to just let the user opt-in and avoid having install playwright by default. Happy to add this under the FAQ though.

However, deploying via vercel doesn't seem to work, because the playwrirght requires a specific system

Another alternative would be to use https://github.com/remcohaszing/mermaid-isomorphic and get the user to load mermaidjs to render the images on the frontend. Not sure if there's another package that already does that.