default export incorrectly typed?

[stefanb2]

I'm trying to use remark-emoji as a plugin for react-markdown in a Typescript React application.

Everything works fine, as long as I don't need to set any plugin options:

import ReactMarkdown from 'react-markdown'

// remark plugins
import remarkEmoji from 'remark-emoji'
import remarkGfm from 'remark-gfm'
import remarkToc from 'remark-toc'

...
export const Markdown = (...) => (
  <ReactMarkDown
    ...
    remarkPlugins={[
      remarkEmoji,
      remarkGfm,
      remarkToc,
    ]}
   ...
  />
);

It seems that the default export is incorrectly typed when comparing it to the other two remark plugins my code uses:

remarkPlugins={[
  () => remarkEmoji({
    emoticon: true,
  }),
  // GFM without any options
  remarkGfm,
  () => remarkToc({
    // TOC options go here....
  }),
]}

The above code fails to compile with

ERROR in src/components/Markdown/Markdown.tsx:22:9
TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Processor<void, Node<Data>, void, void>'.
    20 |
    21 | const remarkPlugins: PluggableList = [
  > 22 |   () => remarkEmoji({
       |         ^^^^^^^^^^^^^
  > 23 |     emoticon: true,
       | ^^^^^^^^^^^^^^^^^^^
  > 24 |   }),
       | ^^^^^

To get the code compiled I have to cast remarkEmoji to the correct type

import type { Transformer } from 'unified'
import type { Root } from 'mdast'
import type { RemarkEmojiOptions } from 'remark-emoji'
const fixedRemarkEmoji = remarkEmoji as (options?: void | RemarkEmojiOptions | undefined) => void | Transformer<Root, Root>

remarkPlugins={[
  () => fixedRemarkEmoji({
    emoticon: true,
  }),
  ...
]}

[stefanb2]

I missed the part in the react-markdown documentation that shows the official way to pass down plugin options. That one works fine with the current type:

remarkPlugins={[
  [remarkEmoji, {
    emoticon: true,
  }],
  ...
]}

Developer asleep at the keyboard, I guess...