search

shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.09k stars 53 forks source link

Error: Cannot handle unknown node `raw` when using with `@mdx-js/mdx` #125

Open michaeloliverx opened 3 years ago

michaeloliverx commented 3 years ago

I am trying to use remark-shiki-twoslash with @mdx-js/mdx@2.0.0-rc.2 (v2) and have the following error:

Error: Cannot handle unknown node `raw`

Full details are on this issue https://github.com/mdx-js/mdx/issues/1820

orta commented 3 years ago

Cool, makes sense, you're welcome to take a look at switching to rehype raw 👍🏻

cseas commented 1 year ago

I was getting this error when specifying filename in the markdown.

Changed

```ts:myFilename.ts

to

```ts

and this error went away.

kasper573 commented 1 year ago

If anyone else is struggling with this, and also tried going down the rehype-raw rabbit hole (and failed), I've made a workaround.

I created a remark plugin that you can add directly after remark-shiki-twoslash that will make it compatible with mdx v2:

// This is an excerpt from a @docusaurus/preset-classic docs configuration object
remarkPlugins: [
  require("remark-shiki-twoslash"),
  require("remark-html-to-jsx"),
],

remark-html-to-jsx finds any nodes with the type html (which is what remark-shiki-twoslash outputs) and converts that html into JSX nodes by using reacts dangerouslySetInnerHTML property. It's a total hack, but it works great for my needs. Figured I'd share:

https://github.com/ksandin/yas/blob/dcf62f7637f7a85f9ce1598851bc26d938314df5/packages/remark-html-to-jsx/index.js

kamranayub commented 1 year ago

Running into this now with Docusaurus v3 stable release. I will try to use @ksandin's workaround (it's not a published package, so need to bring it in manually).

kamranayub commented 1 year ago

So, I patched docusaurus-preset-shiki-twoslash using the remark-html-to-jsx idea like this:

// at the top
const remarkHtmlToJsx = require('./remark-html-to-jsx')

// in `addTwoslash`
a.beforeDefaultRemarkPlugins.push([twoslash, options], remarkHtmlToJsx)

And that does "fix" the error, but it appears the resulting HTML set is not processed through MDXComponents:

image

That div should really be CodeBlock, and so Twoslash does compile/run its logic but because the React component isn't used, there's only static HTML on the page without annotations/styles.

Sainan commented 6 months ago

So, this issue from 2021 means that docusaurus-preset-shiki-twoslash and remark-shiki-twoslash are currently completely unusable by anyone who dare use an up-to-date version of Docusaurus? Cool.