Closed maxbraeutigam closed 2 years ago
Futhermore, I tried it along with the official guide to MDX-NextJS integration and got the same error as above. https://nextjs.org/docs/advanced-features/using-mdx
I guess, this is related: https://github.com/mermaid-js/mermaid/issues/2677
This will be fixed by #18 and I am looking into getting this out in the next couple of weeks
This is resolved with release v2.0.0-rc1
. I'll promote to v2.0.0
in a week or so if there are no bugs reported
Hi, @sjwall. Thank you for your work on this plugin. I tried to test your fix by installing relevant versions (npm install --force mdx-mermaid@2.0.0-rc1 mermaid@8.11.5
- I've also tried using overrides
in Docusaurus site's package.json
: "overrides": { "mermaid": "8.11.5" },
, but it didn't work either), but I'm getting the original error message upon trying to build a Docusaurus site. Am I doing something wrong or missing something?
P.S. By any chance, would you entertain the idea of creating a PlantUML plugin for MDX / Docusaurus (a relevant repo that I found seems to be some unfinished work: https://github.com/TeamDaugherty/docusaurus-plantuml)?
I am also seeing similar errors, possibly related to a different issue.
"mdx-mermaid": "^2.0.0-rc1", "mermaid": "^9.1.5",
import { visit, EXIT } from 'unist-util-visit';
^^^^
SyntaxError: Named export 'EXIT' not found. The requested module 'unist-util-visit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'unist-util-visit';
const { visit, EXIT } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async config (/nexttl/packages/documentation/docusaurus.config.js:9:21)
at async loadSiteConfig (/nexttl/node_modules/@docusaurus/core/lib/server/config.js:38:11)
at async loadContext (/nexttl/node_modules/@docusaurus/core/lib/server/index.js:31:63)
at async load (/nexttl/node_modules/@docusaurus/core/lib/server/index.js:74:21)
at async Command.start (/nexttl/node_modules/@docusaurus/core/lib/commands/start.js:42:19)
@ablekh @spenceradolph For Docusaurus and @mdxjs/mdx v1 use v1.3.1
which now has an ESM build
Describe the bug It’s not possible to use mdx-mermaid in NextJS. Error is:
To Reproduce Steps to reproduce the behaviour including how the file is processed:
npx create-next-app@latest
npm i mdx-mermaid mermaid
<Mermaid chart={
graph TD; A-->B; A-->C; B-->D; C-->D;
} />error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/max/test/test/node_modules/d3/src/index.js require() of ES modules is not supported. require() of /home/max/test/test/node_modules/d3/src/index.js from /home/max/test/test/node_modules/mermaid/dist/mermaid.core.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/max/test/test/node_modules/d3/package.json.
code: 'ERR_REQUIRE_ESM', page: '/' }