Getting TS error Transformer<Root, Root>' is not assignable to type 'Plugin<any[], any, any>'.

[khanakia]

refer to this issue: rehype-pretty/rehype-pretty-code#145

This type of error is because next-mdx-remote uses an old version of vfile.

The main issue in your example is:

Type 'VFileMessage' is missing the following properties from type 'VFileMessage': ancestors

Seems that next-mdx-remote should update to the latest unified/vfile dependencies. For now, you can ignore the type error since runtime works fine.

[khinshankhan]

Just playing around with this a bit with 0 exp but I suspect there may be more type issues galore than just vfile.

I'm currently using pnpm which does a few nice things under the hood like using symlinks for packages. Reason I bring this up is because I get a slightly clearer error than you did:

 page.tsx    55  32 error    2322   Type '(options?: Options | undefined) => Transformer<Root, Root>' is not assignable to type 'Plugin<any[], any, any>'.
   Type 'Transformer<Root, Root>' is not assignable to type 'void | Transformer<any, any>'.
     Type 'Transformer<Root, Root>' is not assignable to type 'Transformer<any, any>'.
       Types of parameters 'file' and 'file' are incompatible.
         Type 'import("/home/shan/development/www/node_modules/.pnpm/vfile@5.3.7/node_modules/vfile/lib/index").VFile' is not assignable to type 'import("/home/shan/development/www/node_modules/.pnpm/vfile@6.0.1/node_modules/vfile/lib/index").VFile'.
           Types of property 'messages' are incompatible.
             Type 'import("/home/shan/development/www/node_modules/.pnpm/vfile-message@3.1.4/node_modules/vfile-message/lib/index").VFileMessage[]' is not assignable to type 'import("/home/shan/development/www/node_modules/.pnpm/vfile-message@4.0.2/node_modules/vfile-message/lib/index").VFileMessage[]'.
               Type 'VFileMessage' is missing the following properties from type 'VFileMessage': ancestors, place (lsp)

I know exactly which versions for which packages are conflicting!

Pnpm supports overrides (most package managers do, the syntax varies a tadbit but easily google-able). Anywho, I installed vfile and vfile-message directly to my project and added overrides (you may need to remove node modules and reinstall all deps as other package managers only honor overrides for first installs).

And now I get the following error:

 page.tsx    55  32 error    2322   Type '(options?: Options | undefined) => Transformer<Root, Root>' is not assignable to type 'Plugin<any[], any, any>'.
   Type 'Transformer<Root, Root>' is not assignable to type 'void | Transformer<any, any>'.
     Types of parameters 'next' and 'next' are incompatible.
       Type 'void' is not assignable to type 'undefined'. (lsp)

Weirdd, but looking over next-mdx-remote's dependencies and types, I suspect it's because unified might be using @mdx-js/mdx v3 whereas we use v2, so I overrode that? I think it used vfile-message under the hood too which caused trouble before but I couldn't find it in the next-mdx-remote's dependencies 👀 (vfile-message is definitely a nested dependency somewhere, doesn't really matter as long as the others are upgraded)

Hey, no more type errors! But wait, v2 -> v3 is a major upgrade and had breaking changes... read over here https://mdxjs.com/migrating/v3/ For my personal stuff, I only had to account for useDynamicImport but I suspect the maintainers may want to take a closer look. It's probably worth upgrading @mdx-js/react too? Also not every remark plugin may be using v3 yet...

[khinshankhan]

Starting to get errors on a different computer using overrides, this probably requires more thought from the maintainers...

[khinshankhan]

Just for completion of understanding the issue, it seems the ecosystem is a bit messy atm and there are a few issues surrounding. Most seem to point here unifiedjs/unified#227

[dstaley]

@khinshankhan can you confirm whether this is an issue with the latest next-mdx-remote@canary release?

[khinshankhan]

I don't get the type errors with 0.0.0-canary-20240321205249 at least.

[khinshankhan]

This canary seems great, I just tested a few other plugins I was playing around with that went beyond simple type ignores eg remarkjs/remark-directive#13 and they seem to work 🎉

[orels1]

Getting similar errors using rehype-prism-plus or @mapbox/rehype-prism

Type 'Plugin<[(Options | undefined)?], Root, Root>' is not assignable to type 'Pluggable'.
  Type 'Plugin<[(Options | undefined)?], Root, Root>' is not assignable to type 'Plugin<any[], any, any>'.
    The 'this' types of each signature are incompatible.
      Type 'Processor<undefined, undefined, undefined, undefined, undefined>' is not assignable to type 'Processor<void, Root, void, void>'.
        Types of property 'use' are incompatible.

Both 5.0.0 and canary produces this, 4.4.1 doesn't seem to trigger it