Using in TypeScript with react-markdown raises an error

[Takagi Kensuke]

Subject of the issue

Using with react-markdown raises an error

Your environment

• macOS 10.15.7 Catalina:
• react-markdown:
• Node.js v14.16.1:

Steps to reproduce

With following codes

import React from "react";
import ReactMarkdown from "react-markdown";
import { attacher, handler } from "./original-message";
import mdast2hast from "remark-rehype";

const SAMPLE = `
:::message
This is a message
:::
`;

function App() {
  return (
    <>
      <h1>This is a Markdown</h1>
      <ReactMarkdown
        remarkPlugins={[
          attacher,
          [
            mdast2hast,
            {
              handlers: {
                message: handler,
              },
            },
          ],
        ]}
        children={SAMPLE}
      />
    </>
  );
}

export default App;

Expected behavior

Any errors are not raised

Actual behavior

Following error is raised from TypeScript

Type 'Plugin<[(Options | undefined)?] | [(Processor<Settings> | undefined)?, (Options | undefined)?], Settings>' is not assignable to type 'Plugin<any[], Settings>'.
  Types of parameters 'settings' and 'settings' are incompatible.
    Type 'any[]' is not assignable to type '[(Options | undefined)?] | [(Processor<Settings> | undefined)?, (Options | undefined)?]'.
      Type 'any[]' is not assignable to type '[(Processor<Settings> | undefined)?, (Options | undefined)?]'.  TS2322

    28 |           attacher,
    29 |           [
  > 30 |             mdast2hast,
       |             ^
    31 |             {
    32 |               handlers: {
    33 |                 message: handler,

[Titus]

Why are you adding remark-rehype to react-markdown?
It’s already doing that: https://github.com/remarkjs/react-markdown/blob/a2b611babce101fd1e7225f0720819c020c40d94/src/react-markdown.js#L97.

remarkjs/remark#692 might help you

[Takagi Kensuke]

@wooorm
Thank you for your advice!!

Why are you adding remark-rehype to react-markdown?
I wanna pass my custom handler to remark-rehype

I read remarkjs/remark#692, and got your recommendation is using node.data.hName and node.data.hProperty in custom mdast -> mdast plugin with remark-rehype

Is my understanding correct??

[Titus]

I don't know what you want to do, so it's hard to suggest the best approach!
But yeah, thats often a good way to go.

[Takagi Kensuke]

@wooorm
thx!!

I just want to extend Markdown and to use extended one with React
And I believe it's confusing mdast can have information for hast
Is using hName and hProperties a workaround for now?

[Titus]

It’s not a workaround. It’s supported for about 6 years now and it’s worked rather well. Though I do get that it’s weird at first.
The diagram created by @ChristianMurphy shows it well.

Markdown has certain constructs. HTML has other constructs. To turn one into the other, it has to be defined somewhere how to do that. For a block quote, that’s not too complex: what HTML they turn into is supported by default. For arbitrary nodes (such as directives), there is no way to represent them in HTML.
So remark-rehype, which is the transform between markdown and HTML, supports how to transform from markdown to HTML embedded in nodes.

[Takagi Kensuke]

@wooorm
Thank you for your polite reply 😆
This is the last comment from me

Though I do get that it’s weird at first.

I feel you
I'll get used to this