Version 9.4.0 - SyntaxError: Named export 'o' not found. The requested module './mermaid.95cd9c8e.js' is a CommonJS module, ...

[olayway]

Description

When switching from mermaid version 9.3.0 to 9.4.0 in my Next.js app, the error below shows up:

ConfigReadError {
  error: file:///Users/o/Projects/flowershow-reproduction-repo/node_modules/mermaid/dist/mermaid.core.mjs:2
  import { o } from "./mermaid.95cd9c8e.js";
           ^
  SyntaxError: Named export 'o' not found. The requested module './mermaid.95cd9c8e.js' 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 './mermaid.95cd9c8e.js';
  const { o } = pkg;
  
      at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
      at ModuleJob.run (node:internal/modules/esm/module_job:189:5)
      at async Promise.all (index 0)
      at ESMLoader.import (node:internal/modules/esm/loader:530:24),
  configPath: '/Users/o/Projects/flowershow-reproduction-repo/contentlayer.config.ts',

...

The app uses Contentlayer to convert MD into JSON files.

mermaid is a dependency of the @flowershow/core package used in the app. The version specified there is ^9.3.0, so both 9.3.0 and 9.4.0 can be installed.

Steps to reproduce

1. Clone this repo: https://github.com/olayway/flowershow-reproduction-repo
2. Run npm i && npm run dev -> now everything works
3. Go to package.json file and change the mermaid version in overrides to 9.4.0, like so:

  "overrides": {
      "mermaid": "9.4.0"
  }

4. Run npm run dev again -> 💥

Screenshots

No response

Code Sample

No response

Setup

Desktop

• OS and Version: [MacOS, ubuntu]

Additional Context

No response

[sidharthv96]

@olayway Can you please try [email protected] ?

[veenified]

@sidharthv96 Same issue for 9.4.2-rc.1. See below...

[sidharthv96]

10.0.0-rc.3 is explicitly marked as ESM. Can you try that?

Changes needed for v10: mermaid-js/mermaid-live-editor@bbd6378

[veenified]

That worked. Thank you @sidharthv96 !

[sidharthv96]

@olayway @veenified can you please test if [email protected] works for you?
We're trying to add UMD back, so need to check if this breaks your package or not.

[rufuspollock]

I can confirm that this fix worked on a Flowershow site i.e. [email protected] works. /cc @olayway (re https://lifeitself.org build where this error showed up)

To add (2h later): that said, i then had this issue which i could resolve by removing mermaid (mdxMermaid plugin) temporarily from the contentlayerconfig.js:

ConfigReadError (.../contentlayer.config.js): SyntaxError: Named export 'visit' 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 } = pkg;

Downgrading to v9.3.0 worked.

[yuis-ice]

I had the same problem.