search

hashicorp / next-mdx-remote

Load MDX content from anywhere
Mozilla Public License 2.0
2.59k stars 139 forks source link

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

Open khanakia opened 8 months ago

khanakia commented 8 months ago

refer to this issue: https://github.com/atomiks/rehype-pretty-code/issues/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 commented 8 months ago

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 :eyes: (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 commented 8 months ago

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

khinshankhan commented 4 months ago

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 https://github.com/unifiedjs/unified/issues/227

dstaley commented 4 months ago

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

khinshankhan commented 4 months ago

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

khinshankhan commented 4 months ago

This canary seems great, I just tested a few other plugins I was playing around with that went beyond simple type ignores eg https://github.com/remarkjs/remark-directive/issues/13 and they seem to work :tada:

orels1 commented 3 months ago

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