VitePress 集成 Mermaid 时出现的 SyntaxError 错误

VitePress 可以通过安装 vitepress-plugin-mermaid 插件来集成 Mermaid。

但是在尝试使用 Mermaid 最新版 11 时，加载 Pie 组件报了如下错误：

xml

runtime-core.esm-bundler.js:44 [Vue warn]: Unhandled error during execution of mounted hook 
  at <Mermaid id="mermaid-66" class="mermaid" graph="---%0Atitle%3A%20Example%20Git%20diagram%0A---%0AgitGraph%0A%20%20%20commit%0A%20%20%20commit%0A%20%20%20branch%20develop%0A%20%20%20checkout%20develop%0A%20%20%20commit%0A%20%20%20commit%0A%20%20%20checkout%20main%0A%20%20%20merge%20develop%0A%20%20%20commit%0A%20%20%20commit%0A" > 
  at <MermaidSample.md onVnodeMounted=fn<runCbs> onVnodeUpdated=fn<runCbs> onVnodeUnmounted=fn<runCbs> > 
  at <VitePressContent class="vp-doc _mermaid-sample" > 
  at <VPDoc key=4 > 
  at <VPContent> 
  at <Layout> 
  at <VitePressApp>

Uncaught (in promise) SyntaxError: The requested module '/@fs/D:/projects/codeup/site/blog/node_modules/langium/lib/utils/cancellation.js?v=9b1d0221' does not provide an export named 'CancellationToken' (at promise-utils.js?v=9b1d0221:6:10)

看报错应该是 mermaid 依赖的 langium 插件出了问题，看了下报错地方的代码，本身应该是没有问题的，就是不知道是和哪个依赖有兼容问题。最后没有找到解决方案，只好将版本回退回去了。

bash

npm i -D mermaid@10.9.3

另外，虽然 Pie 组件不能正常显示，但有几个 11 新增的组件还是可以正常显示的。

VitePress 集成 Mermaid 时出现的 SyntaxError 错误 ​

VitePress 集成 Mermaid 时出现的 SyntaxError 错误