Compilation error upgrading to 13.0.0

[awwsmm]

Hi all, I'm getting the following error on CI following an upgrade to 13.0.0

Type error: Argument of type '{ fragment: boolean; }' is not assignable to parameter of type 'Settings'.
--
21:13:02.576 | Object literal may only specify known properties, and 'fragment' does not exist in type 'Settings'.
21:13:02.576 |  
21:13:02.576 | 26 \|     // Use rehype-highlight to generate language-specific AST
21:13:02.577 | 27 \|     const processed = await rehype()
21:13:02.579 | > 28 \|       .data('settings', { fragment: true })

It's not obvious to me how to resolve this... The docs still recommend following this pattern, but Vercel seems unhappy with it.

[wooorm]

Hey! Duplicate of #149. ts-expect-error or downgrade

[ChristianMurphy]

@wooorm is this the same as #149?
Trying this out in a sandbox https://stackblitz.com/edit/github-xnkz2l?file=src%2Findex.ts%3AL3
It looks like if import 'rehype-parse' is not added, typescript does not register the settings 🤔

@awwsmm try adding import 'rehype-parse' on the page for now.

[wooorm]

Ah, I am sorry, I was too quick!

Yes, you are correct. settings is now typed. If types for rehype-parse are included. Otherwise no fields are allowed.
I noticed this myself earlier: rehype should register those types from rehype-parse and rehype-stringify too! 372da4d

[awwsmm]

@ChristianMurphy I tried this, but got a much more horrific error message this time

Type error: Argument of type '(options?: void \| Options \| undefined) => void \| Transformer<Root, Root>' is not assignable to parameter of type 'Plugin<[options?: void \| Options \| undefined], Root, Root>'.
--
08:36:18.930 | Type 'void \| Transformer<Root, Root>' is not assignable to type 'void \| Transformer<Root, Root> \| undefined'.
08:36:18.930 | Type 'Transformer<Root, Root>' is not assignable to type 'void \| Transformer<Root, Root> \| undefined'.
08:36:18.930 | Type 'import("/vercel/path0/node_modules/unified/index").Transformer<import("/vercel/path0/node_modules/@types/hast/index").Root, import("/vercel/path0/node_modules/@types/hast/index").Root>' is not assignable to type 'import("/vercel/path0/node_modules/rehype-parse/node_modules/unified/lib/index").Transformer<import("/vercel/path0/node_modules/@types/hast/index").Root, import("/vercel/path0/node_modules/@types/hast/index").Root>'.
08:36:18.931 | Types of parameters 'file' and 'file' are incompatible.
08:36:18.931 | Type 'import("/vercel/path0/node_modules/rehype-parse/node_modules/vfile/lib/index").VFile' is not assignable to type 'import("/vercel/path0/node_modules/vfile/lib/index").VFile'.
08:36:18.931 | Types of property 'messages' are incompatible.
08:36:18.931 | Type 'import("/vercel/path0/node_modules/rehype-parse/node_modules/vfile-message/lib/index").VFileMessage[]' is not assignable to type 'import("/vercel/path0/node_modules/vfile-message/lib/index").VFileMessage[]'.
08:36:18.932 | Property 'position' is missing in type 'import("/vercel/path0/node_modules/rehype-parse/node_modules/vfile-message/lib/index").VFileMessage' but required in type 'import("/vercel/path0/node_modules/vfile-message/lib/index").VFileMessage'.
08:36:18.932 |  
08:36:18.932 | 28 \|     const processed = await rehype()
08:36:18.932 | 29 \|       .data('settings', { fragment: true })
08:36:18.932 | > 30 \|       .use(rehypeHighlight, { languages: { scala, bf, lisp } })
08:36:18.933 | \|            ^

Here is the PR which is failing: https://github.com/awwsmm/awwsmm.com/pull/253/files

The offending code can be found in MarkdownUtils.ts

[ChristianMurphy]

@awwsmm that goes back to @wooorm's original message.
In unified 11 (and rehype 13) the types were made stronger.
Not all plugins have been updated to match yet (unifiedjs/unified#228, unifiedjs/unified#227)
There are several hundred plugins being upgraded, it will take a bit for the upgrade to make its way through the ecosystem.

For now you can either:

• use a ts expect error annotation
• hold on rehype 12 until the plugins you use have their typings updated

[awwsmm]

Sounds good, thanks! I'll hold off for now.

[leafac]

First of all, thank y’all for your work on the unified ecosystem. It’s a joy to use and I really appreciate what you’re doing here 🤗

Now, I’ll add some information to help out the next person who arrives here after some confusion and some Googling 😅

Solution 1: Tell TypeScript to ignore the type errors

Use the @ts-expect-error comment. The example of remark’s README ends up looking like this:

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'

main()

async function main() {
  const file = await unified()
    // @ts-expect-error
    .use(remarkParse)
    // @ts-expect-error
    .use(remarkRehype)
    .use(rehypeSanitize)
    .use(rehypeStringify)
    .process('# Hello, Neptune!')

  console.log(String(file))
}

This seems scary, but the maintainers of the unified ecosystem suggest that this is okay. Apparently the types changed, but the underlying code works even across parts of the ecosystem that have been updated and parts that haven’t been updated yet. My preliminary tests confirm this.

Note that at some point the rest of the ecosystem will be updated as well, and by then TypeScript will complain about the @ts-expect-error comments that were left behind.

Solution 2: Revert to older versions of the packages

Go to the package’s page on npm and look for an older version under the Versions tab (for example, here’s the Versions tab for remark). The version numbers, release dates, and number of downloads should make it fairly straightforward to figure out an appropriate older version. Then tell npm to install that specific version, for example:

$ npm install [email protected] [email protected] [email protected] [email protected]

---

References:

• Error: No overload matches this call after library update. unifiedjs/unified#227
• https://github.com/orgs/rehypejs/discussions/150