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

[michaeloliverx]

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 mdx-js/mdx#1820

[orta]

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

[cseas]

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

Changed

```ts:myFilename.ts

to

```ts

and this error went away.

[kasper573]

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]

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]

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:

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]

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.