I am trying to use both markdown-it-textual-uml and vitepress-sidebar plugins in my project.
I started including markdown-it-textual-uml and all was well.
Then I tried to add vitepress-sidebar and apparently, being an ESM module, it needs "type": "module" in package.json. Unfortunately this broke markdown-it-textual-uml which now complains about:
Error: Dynamic require of "file:///home/mcon/projects/@@SITE/node_modules/markdown-it-textual-uml/src/index.js" is not supported
My tentative and very partial config.ts is:
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: (md) => {
md.use(require("markdown-it-textual-uml"));
md.use(require("markdown-it-deflist"));
}
}
})
while my almost-default package.json is:
{
"type": "module",
"scripts": {
"docs:dev": "vitepress dev vitepress",
"docs:build": "vitepress build vitepress",
"docs:preview": "vitepress preview vitepress"
},
"dependencies": {
"markdown-it-deflist": "^2.1.0",
"markdown-it-textual-uml": "^0.12.0"
},
"devDependencies": {
"@types/node": "^20.3.2",
"vitepress-sidebar": "^1.8.1"
}
}
How can I fix this (if at all possible)?
Note: while I'm an experienced programmer I'm not deep in JavaScript and friends, I'm just learning and I still don't really grock it yet.
Why are you requiring it? Just import it:
import { defineConfig } from 'vitepress';
// @ts-ignore
import markdownItTextualUml from 'markdown-it-textual-uml';
export default defineConfig({
markdown: {
config(md) {
md.use(markdownItTextualUml);
},
},
})
This would work even if you set type: module in your package.json.