[ERR_REQUIRE_ESM] with d3 on NextJS

[maxbraeutigam]

Describe the bug
It’s not possible to use mdx-mermaid in NextJS. Error is:

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.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
    at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

To Reproduce
Steps to reproduce the behaviour including how the file is processed:

1. npx create-next-app@latest
2. npm i mdx-mermaid mermaid
3. Adding the minimal code form mdx-mermaid docs to pages/index.js:

import { Mermaid } from 'mdx-mermaid/Mermaid';

<Mermaid chart={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`} />

4. See error above and in browser

Expected behavior
Loading normally and showing graph.

Screenshots

Stack trace

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.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.d3 (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36138:18)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41)
    at Object../src/mermaidAPI.js (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:31599:60)
    at __webpack_require__ (/home/max/test/test/node_modules/mermaid/dist/mermaid.core.js:36381:41) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

Tool chain used:
NexJS latest, see steps to reproduce

[maxbraeutigam]

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

[maxbraeutigam]

I guess, this is related: mermaid-js/mermaid#2677

[sjwall]

This will be fixed by #18 and I am looking into getting this out in the next couple of weeks

[sjwall]

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

[ablekh]

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)?

[spenceradolph]

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)

[sjwall]

@ablekh @spenceradolph For Docusaurus and @mdxjs/mdx v1 use v1.3.1 which now has an ESM build