I’m trying to use MarkdownIt and it’s various plugins in my Vue/Vite project, and I’m running into a situation where I cannot seem to get Vite configured properly to resolve some of the plugins. For example, markdown-it-attrs uses module.exports instead of defining a default export… I’ve tried both CommonJS and ES Module syntax for the import and both lead to errors… Github Copilot recommended the following async import syntax:

const MarkdownItAttrs = await import('markdown-it-attrs').then(module => module.default || module);
const MarkdownItCodeCopy = await import('markdown-it-code-copy').then(module => module.default || module);
const MarkdownItHighlightJs = await import('markdown-it-highlightjs').then(module => module.default || module);

But I’m still left with the following browser issues:

markdown-it-attrs still throws the require is not defined error

markdown-it-code-copy still throws the require is not defined error

markdown-it-highlightjs still throws the module is not defined error

I’ve tried implementing both vite-plugin-dynamic-import and vite-plugin-commonjs to no avail…

How do I move forward?