How to type remarkPlugins and rehypePlugins (Typescript)

[evantahler]

I'm very excited for v2.x.x of next-mdx-remote and gaining Typescript support!

Trying out v2.0.1, I cannot figure out how to properly type the remarkPlugins and rehypePlugins options for renderToString.

You can see how we use it for www.grouparoo.com here https://github.com/grouparoo/www.grouparoo.com/blob/master/utils/mdxUtils.ts#L19-L22

import rehypePrism from "@mapbox/rehype-prism";
import externalLinks from "remark-external-links";

export const mdxOptions = {
  remarkPlugins: [[externalLinks, { target: "_blank" }]],
  rehypePlugins: [[rehypePrism, {}]],
};

And then later we:

  const mdxSource = await renderToString(content, {
    components,
    scope: data,
    mdxOptions, // <--- 
  });

Which yields the very long error:

(property) mdxOptions?: {
    remarkPlugins?: unified.Attacher<[unified.Settings?], unified.Settings>[];
    rehypePlugins?: unified.Attacher<[unified.Settings?], unified.Settings>[];
    hastPlugins?: unified.Attacher<...>[];
    compilers?: unified.Compiler[];
    filepath?: string;
}
These options are passed to the MDX compiler. See the MDX docs..

Type '{ remarkPlugins: (unified.Attacher<[externalLinks.RemarkExternalLinksOptions?], unified.Settings> | { target: string; })[][]; rehypePlugins: any[][]; }' is not assignable to type '{ remarkPlugins?: Attacher<[Settings?], Settings>[]; rehypePlugins?: Attacher<[Settings?], Settings>[]; hastPlugins?: Attacher<[...?], Settings>[]; compilers?: Compiler[]; filepath?: string; }'.
  Types of property 'remarkPlugins' are incompatible.
    Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[][]' is not assignable to type 'Attacher<[Settings?], Settings>[]'.
      Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[]' is not assignable to type 'Attacher<[Settings?], Settings>'.
        Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[]' provides no match for the signature '(this: Processor<Settings>, settings_0?: Settings): void | Transformer'.ts(2322)
render-to-string.d.ts(30, 5): The expected type comes from property 'mdxOptions' which is declared here on type '{ components?: any; scope?: Record<string, unknown>; mdxOptions?: { remarkPlugins?: Attacher<[Settings?], Settings>[]; rehypePlugins?: Attacher<[Settings?], Settings>[]; hastPlugins?: Attacher<...>[]; compilers?: Compiler[]; filepath?: string; }; }'

Any hints on how to type this properly?

Thanks!

[evantahler]

I should add that if I ignore the typescript error with //@ts-ignore, everything works fine

[jescalan]

Hey @evantahler - I'll have to look into this one! It seems to be working ok with my examples of remark plugins, but that doesn't mean it works with all of them.

[aoberoi]

i'm having the same issue. i believe it occurs whenever you try to specify options for a plugin using the [plugin, options] value instead of just plugin.

Seems like Plugin[] isn't the appropriate type to use here, but once I dig into the types for unified things a little confusing for me. Perhaps we actually want to use Pluggable[]? That type is a union which contains PluginTuple, which I believe describes the [plugin, options] value.

[jescalan]

Closed by #96

[evantahler]

Thanks for the update... however, the newest versions still have the same problem for me:

./utils/mdxUtils.ts:44:5
Type error: Type '{ remarkPlugins: (unified.Attacher<[externalLinks.RemarkExternalLinksOptions?], unified.Settings> | { target: string; })[][]; rehypePlugins: any[][]; }' is not assignable to type '{ remarkPlugins?: Pluggable<[Settings?], Settings>[]; rehypePlugins?: Pluggable<[Settings?], Settings>[]; hastPlugins?: Pluggable<...>[]; compilers?: Compiler[]; filepath?: string; }'.
  Types of property 'remarkPlugins' are incompatible.
    Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[][]' is not assignable to type 'Pluggable<[Settings?], Settings>[]'.
      Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[]' is not assignable to type 'Pluggable<[Settings?], Settings>'.
        Type '(Attacher<[RemarkExternalLinksOptions?], Settings> | { target: string; })[]' is not assignable to type '[Attacher<[Settings?], Settings>, Settings?]'.
          Target requires 1 element(s) but source may have fewer.

[aoberoi]

i can confirm i'm also still getting type errors. looks like someone (me?) needs to actually dive into unified's types in order for us to get a solution.

@jescalan can we reopen this issue? i'll have some time to work on this over the weekend. if you're assigning issues, happy to be assignee on this one.

[jescalan]

Done! Sorry for the slow movement here and appreciate the offer to help!

[BRKalow]

I'm going to close this out for now as the type definitions have been updated a bit with v3 earlier this year. Please feel free to reach out if you're still seeing issues, thanks!

[Jule-]

This #96 PR is messing things up for me. Now typescript is complaining my rehype plugins are incompatible because Plugin[] is incompatible with Pluggable[].
Do not know why this was an issue since I have used tuple plugin configuration [plugin, options] without typescript errors since now. Doing so seems to break all third party plugins that export Plugin and not Pluggable.
Or am I doing something wrong?

[mauroreisvieira]

The same on my side ^^

[Jule-]

@BRKalow, @jescalan can you confirm this is an intended behavior? If so what can we do to make things work again?
Many thanks!

[BRKalow]

Can y'all share what next-mdx-remote version you're using? v4 exposes types from the underlying @mdx-js/mdx library, so there shouldn't be any misalignment there.

[Jule-]

Hum I am confused, I have tried again to build my project and it seems that the issue is gone. Maybe @mauroreisvieira can give you the version that causes issues. (On my side I use v3.0.8 right now)
Thanks for the quick response though! 😉

[mauroreisvieira]

Yes, with version 3.0.8 I don't have issues, only with v4.

[BRKalow]

If you can share a minimal reproduction in a codesandbox or a repo I'll take a look.

[mauroreisvieira]

@BRKalow

"next-mdx-remote": "^3.0.8"

"next-mdx-remote": "^4.0.0"

Is the exact same code, but with different versions of next-mdx-remote.

I can try to prepare a Codesandbox.

BTW I use:

"dependencies": {
    "@types/remark-prism": "^1.3.0",
    "remark-prism": "^1.3.6"
}

[Jule-]

@mauroreisvieira ho yeah you are right v4 is breaking stuff, I have tried to upgrade.

Type error: Type 'Plugin<[], Settings>' is not assignable to type 'Pluggable<any[]>'.
  Type 'Plugin<[], Settings>' is not assignable to type 'Plugin<any[], any, any>'.
    The 'this' types of each signature are incompatible.
      Type 'Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void> | Processor<void, void, void, void>' is not assignable to type 'Processor<Settings>'.
        Type 'Processor<void, any, void, void>' is not assignable to type 'Processor<Settings>'.
          Types of property 'use' are incompatible.
            Types of parameters 'plugin' and 'plugin' are incompatible.
              Type 'void | Transformer' is not assignable to type 'void | Transformer<any, any>'.
                Type 'Transformer' is not assignable to type 'void | Transformer<any, any>'.
                  Type 'Transformer' is not assignable to type 'Transformer<any, any>'.
                    Types of parameters 'file' and 'file' are incompatible.
                      Property 'contents' is missing in type 'import("/path/to/project/node_modules/next-mdx-remote/node_modules/vfile/lib/index").VFile' but required in type 'import("/path/to/project/node_modules/vfile/types/index").VFile'.

  86 |     },
  87 |     mdxOptions: {
> 88 |       rehypePlugins: [slug],
     |                       ^
  89 |     },
  90 |   });
  91 | 

with:

  "dependencies": {
    "@mdx-js/loader": "^1.6.22",
    "@next/mdx": "^12.1.0",
    "next": "^12.0.8",
    "next-mdx-remote": "^4.0.0",
    "rehype-slug": "^4.0.1",
  },

[BRKalow]

It looks like remark-prism might not be updated to rely on the latest remark libraries: sergioramos/remark-prism#304

This is likely true for many third-party remark plugins. Please keep in mind v4 is a major upgrade and there were significant changes to the underlying MDX library, as well as the unified ecosystem of libraries. This isn't an issue with next-mdx-remote as we're just passing through the type definitions as they are defined in @mdx-js/mdx, the root of the issue is that some of these plugins are likely incompatible with the latest major release of remark.

[Jule-]

@BRKalow oh okay. So for all community plugins like that, we need to stick with the v3 then. Thanks for the clarifications!

[mauroreisvieira]

Thank you @BRKalow

[Jule-]

Well I found out the old issue I had:

$ npm ls @mdx-js/mdx
├─┬ @next/mdx@12.1.0
│ └─┬ @mdx-js/loader@2.0.0
│   └── @mdx-js/mdx@2.0.0
└─┬ next-mdx-remote@3.0.8
  └── @mdx-js/mdx@1.6.22

I have started to try @next/mdx which pulls @mdx-js/mdx@2.0.0 and conflict with the version of next-mdx-remote@3.0.8.
That's why I end up with fixing "@mdx-js/loader": "^1.6.22":

$ npm ls @mdx-js/mdx
├─┬ @mdx-js/loader@1.6.22
│ └── @mdx-js/mdx@1.6.22
└─┬ next-mdx-remote@3.0.8
  └── @mdx-js/mdx@1.6.22 deduped

In conclusion, it better not use the two libs. 😉

[nos-nart]

I cope with the same issue I have dependencies installed:

 "next-mdx-remote": "3.0.2",
 "rehype-slug": "5.0.1",

[Jule-]

@nos-nart you should check your dependencies with npm ls in order to be sure what is going on with versions, especially for npm ls @mdx-js/mdx which could be included by other of your dependencies with another version. Without this, it could be hard to spot version conflicts.

[nos-nart]

@Jule- I don't have @mdx-js/mdx install as dependency. I tried @ts-ignore Its now yelling at me that

require() of ES Module ...\node_modules.pnpm\rehype-slug@5.0.1\node_modules\rehype-slug\index.js from ....next\server\pages\index.js not supported. Instead change the require of ...\node_modules.pnpm\rehype-slug@5.0.1\node_modules\rehype-slug\index.js in ....next\server\pages\index.js to a dynamic import() which is available in all CommonJS modules.

[Jule-]

@nos-nart have you read my comment? Have you tried to run the command I gave you? @mdx-js/mdx is a dependency of next-mdx-remote so yes you have it as an indirect dependency. You should find some learning content about the node_modules dependency tree.
Your require error is not linked to this issue, please search errors on your own before asking for help, this one is pretty much covered everywhere and the message is self-explanatory.

[jescalan]

Really appreciate everyone jumping in here to help out, but let's try to keep the tone friendly and welcoming please 😁

[Jule-]

I apologize, I didn't mean to sound aggressive, just trying to be helpful and remind good practices IMHO in order to keep issues clear and to respect OS authors' and contributors' time. Really, no hard feelings. 😉

[ethernal]

If anyone finds this topic I have found that typing the offending code like this works:

import { Pluggable } from 'unified';
//...
mdxOptions: {
		remarkPlugins: [
			remarkGfm,
			remarkHeadingId,
			[
				remarkToc,
				{
					heading: 'Contents',
					ordered: true,
					tight: true,
					maxDepth: 3,
				},
			] as unknown as Pluggable<any[]>,
		],
		rehypePlugins: [
			rehypeSlug,
			rehypeAutolinkHeadings,
			[rehypeExternalLinks, { target: '_blank' }] as unknown as Pluggable<
				any[]
			>,
		],
	},