esbuild error: Error [ERR_REQUIRE_ESM]: require() of ES Module

[willin]

/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30092
module.exports = require("d3");
                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/v0/Sites/willin.wang/scripts/node_modules/d3/src/index.js from /Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js not supported.
Instead change the require of index.js in /Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js to a dynamic import() which is available in all CommonJS modules.
    at Object.d3 (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30092:18)
    at __webpack_require__ (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30325:41)
    at Object../src/mermaidAPI.js (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:26042:60)
    at __webpack_require__ (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30325:41)
    at Object../src/mermaid.js (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:25828:69)
    at __webpack_require__ (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30325:41)
    at /Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30392:37
    at /Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:30396:12
    at webpackUniversalModuleDefinition (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:3:20)
    at Object.<anonymous> (/Users/v0/Sites/willin.wang/scripts/node_modules/mermaid/dist/mermaid.core.js:10:3)
    at Object.<anonymous> (/Users/v0/Sites/willin.wang/scripts/node_modules/mdx-mermaid/lib/Mermaid.js:44:33)
    at Object.<anonymous> (/Users/v0/Sites/willin.wang/scripts/mdx.js:12:21)
    at Object.<anonymous> (/Users/v0/Sites/willin.wang/scripts/index.js:4:25) {
  code: 'ERR_REQUIRE_ESM'
}

ref: sjwall/mdx-mermaid#18

[sidharthv96]

I think #2372 was to fix the issue when importing in live editor.
This went in with 8.13.3, but mdx-mermaid seem to be using <= 8.12.0 in peerdependency and ^8.0.0 in dependency.
https://github.com/sjwall/mdx-mermaid/blob/5aa0d48b6871113f0008cf5e4151371dd05d4d0c/package.json#L34

Can you try updating that?
We are publishing esm version since 8.13.3

https://www.jsdelivr.com/package/npm/mermaid?path=dist&version=8.13.3

[aloisklink]

Hi @sidharthv96, this is a duplicate of #2559.

Essentially, since [email protected] is now ESM only, require("d3"); no longer works, which means require("mermaid") no longer works, and require("mdx-mermaid") no longer works. Instead, you can only use the ESM import "mermaid".

This causes an issue, since mdx-mermaid is designed to work with facebook/docusaurus, which currently does not support ESM's import, instead it only supports CommonJS require("mermaid") (see docs here https://docusaurus.io/docs/markdown-features/plugins)

I don't think this issue can be fixed, unless mermaid changes to use an older version of d3.

Instead, mermaid should completely remove CommonJS since it no longer works, and document it in the v8.12.0 CHANGELOG.md entry.
(maybe this should be a MAJOR version change, e.g. 8.x.x can go to an older version of d3 to fix CommonJS, but 9.0.0 can use [email protected])

[sidharthv96]

@knsv What do you think?