sdorra
Mermaid plugin error
Hi, I'm trying to add this remark plugin: https://www.npmjs.com/package/@theguild/remark-mermaid to parse Mermaid syntax, but when I try to build my content collections it throws errors:
build started ...
✘ [ERROR] Could not resolve "tty"
../../node_modules/debug/src/node.js:5:20:
5 │ const tty = require('tty');
╵ ~~~~~
The package "tty" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "util"
../../node_modules/debug/src/node.js:6:21:
6 │ const util = require('util');
╵ ~~~~~~
The package "util" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "os"
../../node_modules/supports-color/index.js:2:19:
2 │ const os = require('os');
╵ ~~~~
The package "os" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "tty"
../../node_modules/supports-color/index.js:3:20:
3 │ const tty = require('tty');
╵ ~~~~~
The package "tty" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
My schema is extremely simple:
const blog = defineCollection({
name: "blog",
directory: "src/content/blog",
include: "**/*.mdx",
schema: (z) => ({
title: z.string(),
description: z.string(),
}),
transform: async (doc, context) => {
const mdx = await transformMDX(doc, context, {
remarkPlugins: [remarkImage, remarkMermaid],
});
return mdx;
},
});
What should I do to fix it?
I'm using Next.js in Turborepo if it matters, but it basically throws the same when I do content-collections build
Can you provide a repository to reproduce the issue? If i try to reproduce it, i became a totally different issue:
Starting content-collections content-collections.ts
build started ...
✘ [ERROR] Could not resolve "@theguild/remark-mermaid/mermaid"
_mdx_bundler_entry_point-139798a1-d2e3-4f39-86d9-e52bb1c2b82f.mdx:2:22:
2 │ import {Mermaid} from "@theguild/remark-mermaid/mermaid";
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@theguild/remark-mermaid/mermaid" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
... error Error: Build failed with 1 error:
_mdx_bundler_entry_point-139798a1-d2e3-4f39-86d9-e52bb1c2b82f.mdx:2:22: ERROR: Could not resolve "@theguild/remark-mermaid/mermaid"
Ok, i've used a quick workaround to bypass the problem with the missing path:
cp node_modules/@theguild/remark-mermaid/dist/mermaid.js node_modules/@theguild/remark-mermaid/
After that i could use mermaid diagrams in a code block of a mdx file.
Okay, but would I solve it in a production build? I'll need to do some patch?
The error went away if I pass the cwd to the compileMDX:
const content = await compileMDX(ctx, post, {
cwd: process.cwd(),
remarkPlugins: [remarkMermaid],
});
I'm not sure why it is not the default in mdx-bundler (which is used by @content-collections/mdx).
@sdorra hey, no, the issue still persists
> next dev --turbo
Starting content-collections content-collections.ts
build started ...
✘ [ERROR] Could not resolve "tty"
../../node_modules/debug/src/node.js:5:20:
5 │ const tty = require('tty');
╵ ~~~~~
The package "tty" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "util"
../../node_modules/debug/src/node.js:6:21:
6 │ const util = require('util');
╵ ~~~~~~
The package "util" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "os"
../../node_modules/supports-color/index.js:2:19:
2 │ const os = require('os');
╵ ~~~~
The package "os" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
✘ [ERROR] Could not resolve "tty"
../../node_modules/supports-color/index.js:3:20:
3 │ const tty = require('tty');
╵ ~~~~~
The package "tty" wasn't found on the file system but is built into node. Are you trying to bundle
for node? You can use "platform: 'node'" to do that, which will remove this error.
... error Error: Build failed with 4 errors:
../../node_modules/debug/src/node.js:5:20: ERROR: Could not resolve "tty"
../../node_modules/debug/src/node.js:6:21: ERROR: Could not resolve "util"
../../node_modules/supports-color/index.js:2:19: ERROR: Could not resolve "os"
../../node_modules/supports-color/index.js:3:20: ERROR: Could not resolve "tty"
@Bartek532 i can’t reproduce the issue. Can you please provide a sample repository?
@sdorra sure, here it is: https://github.com/Bartek532/cc-mermaid-plugin-error - when I run pnpm dev I see the above errors ;)
Things are also going well for me with this repository:
> [email protected] dev /Users/sdorra/Desktop/cc-mermaid-plugin-error
> next dev --turbopack
Starting content-collections content-collections.ts
build started ...
... finished build of 1 collection and 1 document in 1644ms
start watching ...
▲ Next.js 15.1.7 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.1.154:3000
✓ Starting...
✓ Ready in 712ms
○ Compiling / ...
✓ Compiled / in 1280ms
GET / 200 in 1438ms