如何解决markdown-it-textual-uml与vitepress-sidebar共存问题？

问题核心：项目开启"type": "module"后，Node.js强制使用ES模块规范，禁止了CommonJS的require()语法，而markdown-it-textual-uml和markdown-it-deflist属于CommonJS模块，直接用require()会触发报错。

解决步骤： #

1. 将require()替换为ES动态导入(import())
   VitePress的markdown.config支持异步函数，可通过动态导入加载CommonJS模块，且需获取模块的default导出（CommonJS模块的module.exports对应ES模块的default）。

2. 修改config.ts中的markdown配置部分：

import { defineConfig } from 'vitepress'
import { generateSidebar } from 'vitepress-sidebar'

export default defineConfig({
  title: "Mauro Condarelli personal site",
  description: "A random collection of unrelated projects",
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],

    sidebar: generateSidebar({
      // use defaults
    }),

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  },
  
  markdown : {
    config: async (md) => {
      // 动态加载CommonJS模块并获取default导出
      const textualUml = await import('markdown-it-textual-uml');
      md.use(textualUml.default);
      
      const deflist = await import('markdown-it-deflist');
      md.use(deflist.default);
    }
  }
})

3. 保持package.json的"type": "module"配置不变

原理说明： #

当项目设置"type": "module"后，所有.js/.ts文件会被当作ES模块解析，此时require()属于CommonJS语法，会被Node.js禁止。动态import()是ES模块中加载CommonJS模块的标准方式，通过await import()异步加载模块后，CommonJS模块的导出会被包裹为ES模块的default属性，因此需要通过.default获取实际的插件函数。

内容的提问来源于stack exchange，提问作者ZioByte