Error: Plugin "Shiki" caused an error in its "performSyntaxAnalysis" hook.
visualnaut opened this issue · comments
Hi thank you so much for this awesome project, I currently create personal blog using it but I encounter an issue.
I'm using Astro and installed bothastro-expressive-code and remark-expressive-code and I use astro-expressive-code in astro.config.mjs for MDX files and remark-expressive-code for my Vue components that I load via Astro pages.
But unfortunately I encounter this error in the browser console coming from remark-expressive-code
Error: Plugin "Shiki" caused an error in its "performSyntaxAnalysis" hook.
Error message: Expected a valid instance of ExpressiveCodeAnnotation, but got
{"inlineRange":{"columnStart":0,"columnEnd":7},"renderPhase":"earliest","styleVariantIndex":0,"color":"#FF955C","italic":false,"bold":false,"underline":false}
Below you can found reproduction to the case
Reproduction link
Looking at your package.json, you have a version mismatch between your installed Expressive Code packages, and therefore the engine gets loaded multiple times using different incompatible versions.
You need to ensure that all packages use the same version. In your case, @expressive-code/plugin-collapsible-sections is older than all the others.
After running npm i @expressive-code/plugin-collapsible-sections@latest and restarting the dev server, the error disappears and a code block is rendered.
Just a little word of caution: The way in which you're using Expressive Code in this example seems really complex to me and I'm a bit worried that you will run into issues when using it like that.
My goal with Expressive Code was always to do as much work as possible on the server, and only deliver minimal JS to the client. Actually, the only JS code currently needed are a few framework-agnostic JS lines for the copy button.
I've never seen Expressive Code wrapped into a vue component that must be hydrated on the client in order to actually display the code block. After fixing your example as described above, you can see how long it takes to actually display the code block due to the hydration overhead when using this approach.
Thank you so much, @hippotastic! I've been pulling my hair out for the last hour because of this 😅
Your last comment also made me realize I really don't need Expressive Code for my use case inside a Vue component; I just need a simple syntax highlighter! I guess I need to take a break for now 🎄
Haha, sounds good! Yeah, Expressive Code has a lot of features, and if all you need is a bit of syntax highlighting for your use case inside the Vue component, it's a good alternative to just use one directly. Enjoy your break! :)