Incorrect installation instructions for a clean project

[sharebear]

I've just spent the whole work day trying to get this working on a fresh project and I still don't have a config that works for both the dev server and the static build...

Steps to reproduce

mkdir vitepress-mermaid-test
cd vitepress-mermaid-test/
npm init -y
npm install -D vitepress
npx vitepress init
npm i vitepress-plugin-mermaid mermaid @mermaid-js/mermaid-mindmap -D
# update docs/.vitepress/config.ts to match documentation at https://emersonbottero.github.io/vitepress-plugin-mermaid/guide/getting-started.html#setup-it-up
npm run docs:dev

Expected result

Can open page in browser ready to start adding diagrams to the scaffolded documentation

Actual result

In chome, it just hangs, in Firefox I get an error message on the console.

Uncaught SyntaxError: ambiguous indirect export: sanitizeUrl

What I've tried

I found this comment so added the following to docs/vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ['@braintree/sanitize-url'],
  },
});

New Error in firefox

Uncaught SyntaxError: ambiguous indirect export: default

Following the link in the error message I see this is related to dayjs, and through various searches end up with the following in my vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ['@braintree/sanitize-url'],
  },
  resolve: {
    alias: {
      dayjs: 'dayjs/',
    },
  },
});

Success! The scaffolded site renders. I add my first simple diagram to the docs/markdown-example.md

Still working, looking good so far...

Now it's time to try building the static site...

npm run docs:build

This ends up with the following error message

✓ building client + server bundles...
build error:
file:///home/jshare/work/temp/vitepress-mermaid-test/node_modules/mermaid/dist/mermaid.core.mjs:2
import { o } from "./mermaid-ae477ddf.js";
         ^
SyntaxError: Named export 'o' not found. The requested module './mermaid-ae477ddf.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-ae477ddf.js';
const { o } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

And here is where I'm currently stuck... had some other problems along the way (I was first using yarn, that gave me mermaid 10, which doesn't work as renderAsync has been removed).

If it helps my package.json currently looks like this

{
  "name": "vitepress-mermaid-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@mermaid-js/mermaid-mindmap": "^9.3.0",
    "mermaid": "^9.4.3",
    "vitepress": "^1.0.0-alpha.61",
    "vitepress-plugin-mermaid": "^2.0.10"
  }
}

[byawitz]

Thanks for your structure. it works

[Cristian-David-Github]

I have this same error, if I follow those steps at the end I'm able to see my vitepress site, but no mermaid graph gets rendered. and if as the OP I try to make a clean install, it doesnt work... is there any aditional steps other than the ones outlined in the previous comments.

[matthiasg]

i did get it to work , but static compilation doesn't work. it complains about vue/server-renderer.

does it work with current dependencies for anyone here?

[ayhanfuat]

I was also having the same problem. Tried a couple of combinations and only managed to make it work with Mermaid 8. Here's my package.json:

{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
  "devDependencies": {
    "@mermaid-js/mermaid-mindmap": "^9.3.0",
    "mermaid": "^8.14.0",
    "vitepress": "^1.0.0-alpha.74",
    "vitepress-plugin-mermaid": "^2.0.10"
  }
}

[altpoint]

fixed this bug → https://github.com/altpoint/vitepress-plugin-mermaid

[tex0l]

I tried as well on a vitepress@1.0.0-beta.1, it fails with mermaid 9 and 10 with the error you reported, I tried to use @altpoint's fork, it doesn't work either. I tried to rollback to mermaid 8, it doesn't fail with the error your reported, it just outputs a div containing the string undefined instead of the expected diagram.

I'm very eager to see this work as I'm currently relying on a half-baked plantuml-based diagram generation which outputs not that pretty diagrams and which are not compatible with the dark-mode.

[emersonbottero]

here is an working example.. does not matter the version of vitepress.. only the mermaid version. the last ones started to using libraries not compatible to esm.

https://github.com/emersonbottero/vitepress-demo2

[emersonbottero]

now it is working with the latest version..