The latest updates on your projects. Learn more about Vercel for Git ↗︎

Issue here, is that we need playwright to render the diagram in back-end. So what do you think about this aproche.

Issue here, is that we need playwright to render the diagram in back-end. So what do you think about this aproche.

I mean there is also #7395, so this could help with both things

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	88.75% (742/836)	76.1% (242/318)	87.65% (142/162)

Unit Test Report

FYI @AugustinMauroy build is failing:

@node-core/website:build: TypeError: {}.resolve is not a function
@node-core/website:build:     at <unknown> (.next/server/chunks/9603.js:9:50830)
@node-core/website:build: 
@node-core/website:build: > Build error occurred
@node-core/website:build: [Error: Failed to collect page data for /sitemap.xml] { type: 'Error' }
@node-core/website:build: npm error Lifecycle script `build` failed with error:
@node-core/website:build: npm error code 1
@node-core/website:build: npm error path /vercel/path0/apps/site
@node-core/website:build: npm error workspace @node-core/website
@node-core/website:build: npm error location /vercel/path0/apps/site
@node-core/website:build: npm error command failed
@node-core/website:build: npm error command sh -c cross-env NODE_NO_WARNINGS=1 next build
@node-core/website:build: ERROR: command finished with error: command (/vercel/path0/apps/site) /node22/bin/npm run build exited (1)
@node-core/website#build: command (/vercel/path0/apps/site) /node22/bin/npm run build exited (1)

FYI @AugustinMauroy build is failing:

yeah I know it's maybe a upstream issue.

FYI @AugustinMauroy build is failing:

yeah I know it's maybe a upstream issue.

That ain't a valid reasoning. Please investigate :)

That ain't a valid reasoning. Please investigate :)

yeah I mean I'm on it

Okay update on this issue it's because next doesn't understand import.meta.resolve.
potential solution:

• creating a babelrc.json an changing behavor of next
• using a webpack loader
• i create a new plugin that doesn't use this API

It is not a Next.js problem. More like a SWC issue. It understands what import.meta is but it asks to use deconstruction rather than direct access.

Okay, here's the current status:

1. I forked the package that was misunderstood by Next.js
2. I patched it using api node (which in many cases is not the best idea, better to use ESM resolution chain)
3. I overrode the dep to use the local version
   Still to be fixed:

• dark theme
• storybook
• build issue (need to build package => re install => build app)

Okay let's me explain why this choice.
The issue come from Next.js with SWC/Bundler so we cannot fix it on our side.
Your solution of patching upstream package cannot work because the package didn't have any issue.
So two solution was possible fork it and publish it to NPM or include it on our monorepo.
Why not publish it to npm mainly because it's a temporary solution by waiting Next.js to fix their issue.

Why not publish it to npm mainly because it's a temporary solution by waiting Next.js to fix their issue.

I think that we should either open or monitor an issue on Next.js, and put mermaid on hold until that is resolved.

I just can't realistically see us maintaining such a large (and not written by us) codebase, even if it's only temporary

I think that we should either open or monitor an issue on Next.js, and put mermaid on hold until that is resolved.

Already done !

I just can't realistically see us maintaining such a large (and not written by us) codebase, even if it's only temporary

"Huge" without test and fixture the patched package took 3 files

On a different note, I'm not too keen on supporting Mermaid this way, as it prevents the website from being "out-of-the-box" buildable. Users would need to have a Playwright browser installed on their machine (right?), which, if I recall correctly, can take up to a gigabyte of space.

That said, I submitted a PR to mermaid-isomorphic that should address the issue.

remcohaszing/mermaid-isomorphic#13

Sadly you need a proper DOM environment to render Mermaid diagrams. I also considered JSDom, but that won’t work, because it doesn’t support node dimensions.

Another approach would be to use the pre-mermaid strategy, but then you need to include Mermaid in the client side bundle.

Another approach would be to use the pre-mermaid strategy, but then you need to include Mermaid in the client side bundle.

The issue with that is Next.js actually try to bundle everything include if you specify pre-mermaid

That’s true. Webpack will still import and process mermaid-isomorphic if you use the pre-mermaid approach. But you can stub it. All you need is something like:

export function createMermaidRenderer() {
  // This is an empty stub
}

And alias mermaid-isomorphic to that file in the Webpack config.

I don’t think this is ideal, but it would at least enable you to use Mermaid diagrams.

My personal recommendation as an MDX maintainer would be to replace all custom MDX compilation logic with @next/mdx. Then you can specify rehype-mermaid in next.config.js, without having to deal with any Next.js module resolution quirks.

Sadly you need a proper DOM environment to render Mermaid diagrams.

Okay. In that case, disregard what I said about playwright–i guess it's required

Another approach would be to use the pre-mermaid strategy, but then you need to include Mermaid in the client side bundle.

In my opinion, bundling a entire mermaid renderer in the client-side bundle is unnecessary and bloated for the client. Instead, we should use a package like the ones that @remcohaszing created.

My personal recommendation as an MDX maintainer would be to replace all custom MDX compilation logic with @next/mdx. Then you can specify rehype-mermaid in next.config.js, without having to deal with any Next.js module resolution quirks.

Interesting, @ovflowd is this possible?

@remcohaszing is there a way you can patch your library to not use import.meta.resolve? Maybe via a stub package?

That should resolve the issues we are facing, right?

@remcohaszing is there a way you can patch your library to not use import.meta.resolve? Maybe via a stub package?

That should resolve the issues we are facing, right?

I really don’t see how. mermaid-isomorphic works by:

• Starting a playwright browser.
• Opening an HTML file, which needs to be resolved as a relative path.
• Injecting the Mermaid UMD script, which needs to be resolved from a dependency in node_modules.
• Injecting the FontAwesome CSS, which needs to be resolved from a dependency in node_modules.
• Some magic to ensure consistent results ✨
• Rendering the Mermaid diagrams in the prepared page.

rehype-mermaid then wraps this in a rehype plugin for compatibility with rehype / MDX.

So it really needs to resolve things on the file system somehow.

Got it! Thanks again for your insight!

I still feel that drastically increasing our codebase and using dependency overrides isn’t the best solution, so I’ll continue to keep this PR blocked for now.

1. There are several objections to this approach
2. This PR is severely behind main. Assuming a solve for 1. is done, it would be easier to start over with a new PR
3. This PR being opened may inhibit potential contributors from wanted to contribute to this issue

Unless there are any objections, I think this PR should be closed.

I'll rebase don't worry

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 74.83%. Comparing base (87c918e) to head (fce08e7).

✅ All tests successful. No failed tests found.

@@           Coverage Diff           @@
##             main    #7544   +/-   ##
=======================================
  Coverage   74.83%   74.83%           
=======================================
  Files          98       98           
  Lines        7888     7888           
  Branches      200      200           
=======================================
  Hits         5903     5903           
  Misses       1984     1984           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Rebase + removed "hosted" fork
so now wait for upstream fix

blocked by upstream