microsoft / vscode-markdown-it-katex

Add Math to your Markdown with a KaTeX plugin for Markdown-it
Other
14 stars 16 forks source link

Fail to use plugin with Svelte (TypeError: plugin.apply is not a function) #14

Open vcoppe opened 3 months ago

vcoppe commented 3 months ago

Hi, I am trying to import and use this plugin in a Svelte project as shown below

import markdownit from 'markdown-it';
import mk from '@vscode/markdown-it-katex';

const md = markdownit().use(mk);

but cannot avoid the following error

TypeError: plugin.apply is not a function
    at MarkdownIt.use (file:///.../node_modules/markdown-it/lib/index.mjs:485:10)

Here is a minimal reproducible example: https://svelte.dev/repl/fea74f54d05c4632ac61e2e7d46df355?version=4.2.12.

Note that this error does not occur with other versions of this plugin (iktakahiro/markdown-it-katex or traPtitech/markdown-it-katex). Do you know what could cause this?

smearumi commented 3 months ago

same issue here. :(

mensah-j commented 1 month ago

Examining the imported module with console.log(mk) yields

{ default: [Function: default_1]  }

which hints that this is due to the interaction between CommonJS and ES modules. From the Node.js documentation:

When importing CommonJS modules, the module.exports object is provided as the default export.

How do I fix this issue?

Simply replace mk with mk.default to access the plugin function. See here for an example.

I suspect this issue is due the choice of module output format by the Typescript compiler. If your compiler emits ES modules , then the above should apply. However, if the module format is CommonJS, then adding .default should not be necessary. For example, when adding this package as a plugin to Vite, you will need to use the .default syntax since the actual runtime script vite.js is compiled as an ES module.