remarkjs/remark-math

Overload resolution fails for rehype-katex

nicholasjng opened this issue · 2 comments

nicholasjng commented

Subject of the issue

I am using a markdown processing pipeline in a next.js project with rehype-katex (shown below), and after upgrading some packages, I have been unable to compile my code (I'm using typescript) due to an overload resolution problem.

Your environment

  • OS: macOS 11.5.1 on Apple M1
  • Packages: "rehype-katex": "^5.0.0", "rehype-stringify": "^9.0.1", "remark-math": "^4.0.0", "remark-rehype": "^8.1.0", "unified": "^10.1.0" (taken from package.json)
  • Env: node v16.6.0

Steps to reproduce

My code is extremely similar to the example from the readme, actually:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeKatex from "rehype-katex";
import rehypeStringify from "rehype-stringify";
import math from "remark-math";

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(math)
    .use(remarkRehype)
    .use(rehypeKatex) // <--- this fails
    .use(rehypeStringify)
    .process(markdown);

  return result.value;
}

Expected behavior

I had been using this code without problems until I bumped some package versions, which I expected would continue.

Actual behavior

There is an error when compiling the files, indicating an overload issue in rehype-katex:

Type error: No overload matches this call.
  Overload 1 of 3, '(plugin: Plugin<[KatexOptions?], Node, Node>, ...settings: [KatexOptions?] | [boolean]): Processor<Node, Node, Node, void>', gave the following error.
    Argument of type 'Plugin<[KatexOptions?], Settings>' is not assignable to parameter of type 'Plugin<[KatexOptions?], Node, Node>'.
      The 'this' types of each signature are incompatible.
        Type 'Processor<void, Node, void, void>' is not assignable to type 'Processor<Settings>'.
          Types of property 'use' are incompatible.
            Type '{ <PluginParameters extends any[] = any[], Input = Node, Output = Input>(plugin: Plugin<PluginParameters, Input, Output>, ...settings: [boolean] | PluginParameters): UsePlugin<...>; <PluginParameters extends any[] = any[], Input = Node, Output = Input>(tuple: [...] | [...]): UsePlugin<...>; (presetOrList: Preset | P...' is not assignable to type '{ <S extends any[] = [Settings?]>(plugin: Plugin<S, Settings>, ...settings: S): Processor<Settings>; <S extends any[] = [Settings?]>(preset: Preset<S, Settings>): Processor<...>; <S extends any[] = [...?]>(pluginTuple: [...]): Processor<...>; (list: PluggableList<...>): Processor<...>; (processorSettings: ProcessorS...'.
              Types of parameters 'plugin' and 'plugin' are incompatible.
                The 'this' types of each signature are incompatible.
                  Type 'Processor<void, void, void, void> | Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void>' is not assignable to type 'Processor<Settings>'.
                    Type 'Processor<void, void, 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("/Users/nicholasjunge/Workspaces/web/personal-website/node_modules/unified/node_modules/vfile/lib/index").VFile' but required in type 'import("/Users/nicholasjunge/Workspaces/web/personal-website/node_modules/vfile/types/index").VFile'.
  Overload 2 of 3, '(tuple: [Plugin<any[], Node, Node>, ...any[]] | [Plugin<any[], Node, Node>, boolean]): Processor<Node, Node, Node, void>', gave the following error.
    Argument of type 'Plugin<[KatexOptions?], Settings>' is not assignable to parameter of type '[Plugin<any[], Node, Node>, ...any[]] | [Plugin<any[], Node, Node>, boolean]'.
      Type 'Plugin<[KatexOptions?], Settings>' is not assignable to type '[Plugin<any[], Node, Node>, boolean]'.
  Overload 3 of 3, '(presetOrList: Preset | PluggableList): Processor<Node, Node, Node, void>', gave the following error.
    Argument of type 'Plugin<[KatexOptions?], Settings>' is not assignable to parameter of type 'Preset | PluggableList'.
      Type 'Plugin<[KatexOptions?], Settings>' is missing the following properties from type 'Pluggable<any[]>[]': pop, push, concat, join, and 27 more.

Removing the .use(rehypeKatex) line makes everything compile, but that would of course have the disadvantage that math is not being styled anymore in my pages. I am not a very adept JS/TS user, so my ability to fix this on my own is limited - hence this issue. If there's any more info I need to provide, I am happy to add that though.

Strangely, my git history indicates that I had been using rehype-katex@^5.0.0 even before when everything was working fine (I just resumed my project after ~3 months), so maybe this is a cascading issue from another package?

wooorm commented

We’re upgrading all projects to ESM and strongly types TS through JSDoc (unifiedjs/unified#121).
Almost everything is done now, except for the remark org. Expect them to be done in a couple of days.

For now: rehypejs/rehype#63

nicholasjng commented

Thank you for the quick response! I will try and go with the @ts-expect-error suggestion you made in the linked issue for the time until the upgrade lands.

Edit: Works like a charm, thanks! I think this can be closed now.

  • 👍1