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

[davidgasquez]

Hey there! I wanted to test flowershow as an Obsidian Publish replacement and I'm hitting some errors when running npx flowershow@latest preview. You can reproduce it by following the Publish tutorial. It also seems to be happening in CI.

This is the error:

   > @flowershow/template@1.0.0 export
   > npm run build && next export
   
   
   > @flowershow/template@1.0.0 prebuild
   > npm run generate
   
   
   > @flowershow/template@1.0.0 generate
   > contentlayer build && cross-env NODE_OPTIONS="--experimental-json-modules --experimental-modules" node ./scripts/search.mjs
   
   ConfigReadError {
     error: file:///tmp/tmp.WuO12pd1pW/.flowershow/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: '/tmp/tmp.WuO12pd1pW/.flowershow/contentlayer.config.ts',
     _tag: 'ConfigReadError',
     toString: [Function (anonymous)],
     [Symbol()]: {
       error: file:///tmp/tmp.WuO12pd1pW/.flowershow/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: '/tmp/tmp.WuO12pd1pW/.flowershow/contentlayer.config.ts'
   },
   [Symbol()]: [ 'configPath', 'error' ]
 }
 
 -- assertion failed --
 expression : [ -d .flowershow/out ]
   --

[olayway]

@davidgasquez thank you for reporting this! I'll fix it today.

[olayway]

Most probably this is an issue with mermaid version 9.4.0. I've created an issue in their repo:
mermaid-js/mermaid#4100

A temporary solution is to force version 9.3.0 to be installed in the template. Pushed to main: 761cad2
I'm marking this issue as blocked until we hear back from mermaid team.

[olayway]

@davidgasquez please give it a try once again and let me know if the fix worked and if I'll have a free weekend 😅

[lapo-luchini]

This update solved the issue for me!

% npx flowershow install
% npx flowershow build
[…]
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

[davidgasquez]

It works! 🎉 Thanks @olayway for taking care of this one so quickly. Love the project!