How to upgrade Rehype plugins with new JSDoc based types?

[aurelien-reeves]

It seems that new JSDoc based types for rehype plugins - as seen for example with rehype-raw and rehype-sanitize - is not compatible anymore with unified.Pluggable

Type '(options?: void | Options) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[], Settings>'.
  Type '(options?: void | Options) => void | Transformer<Root, Root>' is not assignable to type 'Plugin<any[], Settings>'.

How should we migrate those plugins to their new versions with a typescript codebase?

Refs. cucumber/common#1680
Refs. cucumber/common#1679

[wooorm]

Perhaps with a @ts-expect-error for now — the actual code should just work but the types depend on a new major of unified (which is already released but isn’t in react-markdown yet)

[T-Damer]

Well, I'm using this markdown package in my React app. When I use custom

<ReactMarkdown
            rehypePlugins={[rehypeRaw]}  // <- TS issue here
            children={text}
/>

I have same TypeScript issue:

Type '(options?: void | Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[], Settings>'.

Adding //@ts-expect-error gives this error on render:

TypeError: Object(...) is not a function
Module../node_modules/property-information/index.js
.../node_modules/property-information/index.js:17
  14 | export {find} from './lib/find.js'
  15 | export {hastToReact} from './lib/hast-to-react.js'
  16 | export {normalize} from './lib/normalize.js'
> 17 | export var html = merge([xml, xlink, xmlns, aria, htmlBase], 'html')
  18 | export var svg = merge([xml, xlink, xmlns, aria, svgBase], 'svg')

Not sure if this problem related to rehype, or to markdown, this issue led to your discussion

P.S. of course I tried using as any, gives same error on render as //@ts-expect-error

[wooorm]

Did you try updating react-markdown?

[T-Damer]

Oh yeah, thank you, hah from 6.0.2 to 6.0.3, also used @ts-expect-error because TS swears :) Also as any works too

[Marujah]

you can just cast it as as ReactMarkdown.PluggableList:
rehypePlugins={[rehypeRaw] as ReactMarkdown.PluggableList}

[fieldsco]

Here's a good option that avoids any:

import { PluggableList } from 'unified'; // already a peer dependency, no need to install
...
rehypePlugins={[rehypeRaw, rehypeMathjax] as PluggableList}

[Gerald-ux-ux]

adding @ts-expect-error just above the line fixes the solution