slidev icon indicating copy to clipboard operation
slidev copied to clipboard

MDC component syntax stopped working after an update

Open ldonetti opened this issue 1 year ago • 3 comments

Describe the bug

I use MDC syntax in my slides and it used to work. Unfortunately, after an update it started to give errors on components with parameters: Internal server error: Invalid block params. Maybe I'm not understanding correctly the MDC component syntax, but it was working previously (both with inline components and block components).

Minimal reproduction

Steps to reproduce the behavior:

  1. Start a new slidev project
  2. Edit slidev.md, modifying the example component usage with MDC syntax.
---
mdc: true
---

# Components

:Tweet{id="1390115482657726468"}
<!-- <Tweet id="1390115482657726468" />  this works -->

  1. See the error on the terminal:
1:39:55 PM [vite] Internal server error: Invalid block params: Tweet{id="1390115482657726468"}
  Plugin: unplugin-vue-markdown
  File: /home/luca/software/slides/test/slides.md__slidev_1.md
      at parseBlockParams (file:///home/luca/software/slides/test/node_modules/markdown-it-mdc/dist/index.mjs:133:11)
      at Array.mdc_block_shorthand (file:///home/luca/software/slides/test/node_modules/markdown-it-mdc/dist/index.mjs:156:11)
      at ParserBlock.tokenize (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/parser_block.mjs:88:20)
      at ParserBlock.parse (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/parser_block.mjs:129:8)
      at Array.block (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/rules_core/block.mjs:11:20)
      at Core.process (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/parser_core.mjs:56:13)
      at MarkdownIt.parse (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/index.mjs:511:13)
      at MarkdownItVDrag.md.parse (file:///home/luca/software/slides/test/node_modules/@slidev/cli/dist/chunk-KX2WMXVC.js:9233:19)
      at MarkdownItInlineProps.md.parse (file:///home/luca/software/slides/test/node_modules/markdown-it-mdc/dist/index.mjs:382:27)
      at MarkdownIt.render (file:///home/luca/software/slides/test/node_modules/markdown-it/lib/index.mjs:530:36)
      at file:///home/luca/software/slides/test/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:156:25
      at TransformPluginContext.transform (file:///home/luca/software/slides/test/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:327:37)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async PluginContainer.transform (file:///home/luca/software/slides/test/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:48974:18)
      at async loadAndTransform (file:///home/luca/software/slides/test/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:51796:27)
      at async viteTransformMiddleware (file:///home/luca/software/slides/test/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:61750:24)

Environment

  • Slidev version: v0.49.24
  • Browser: Firefox 128.0.3
  • OS: Ubuntu 24.04 LTS

I used this syntax in slide decks that worked with slidev v0.49.7. I tried them in a newly setup project with slidev v0.49.7 and they do not work: they only work if I use the old package-lock.json. I don't know if this is a regression in a dependency or an incompatibility between slidev and a newer version of a dependency: how could debug or test it?

ldonetti avatar Aug 13 '24 12:08 ldonetti

I think this is caused by markdown-it-mdc. Could you try out which version of markdown-it-mdc starts to have this error via the overrides field in package.json?

kermanx avatar Aug 13 '24 13:08 kermanx

Using your suggestion I found out that the last working version of markdown-it-mdc is 0.2.3. Versions 0.2.4 and 0.2.5 do not work.

ldonetti avatar Aug 13 '24 14:08 ldonetti

A small update. With markdown-it-mdc version 0.2.4, my minimal example does not work and gives the error I reported in the first comment, but the syntax works if the component is not the first thing on a line (like in the tests of the package) as in:

inline :Tweet{id="1390115482657726468"}

ldonetti avatar Aug 13 '24 16:08 ldonetti