Cannot run the code after upgrading the library: missing property `code.inline` and changed the type of `p.ref`

[MartinXPN]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

"react-markdown": "^9.0.0",

Link to runnable example

No response

Steps to reproduce

I have the following component that used to work fine:

                    <ReactMarkdown components={{
                        p: ({node, ...props}) => <Typography whiteSpace="pre-wrap" {...props} />,
                        code: ({node, inline, className, children, ...props}) => {
                            const match = /language-(\w+)/.exec(className || '')
                            return !inline && match
                                ? <LazyCode content={String(children)} language={match[1]} />
                                : <code className={className} {...props}>{children}</code>
                        },
                    }}>{conversation.raw?.trim()}
                    </ReactMarkdown>

Now, I get the following errors:

1.  p.ref -->        Type 'string' is not assignable to type '((instance: HTMLSpanElement | null) => void) | RefObject | null | undefined'.
2. code.inline --> TS2339: Property 'inline' does not exist on type 'ClassAttributes & HTMLAttributes & ExtraProps'.

I'm using node@18.17.0 with next@13.5.4

Expected behavior

It used to work fine using the previous version

Actual behavior

The code does not compile

Runtime

Other (please specify in steps to reproduce)

Package manager

yarn 2

OS

Linux, macOS

Build and bundle tools

Next.js

[Murderlon]

Hi! Have you checked the changelog before upgrading?

Particularly this: https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-extra-props-passed-to-certain-components

[MartinXPN]

Thanks a lot for the prompt reply @Murderlon ! So, is there a way to distinguish between inline vs block code components in the new version? I'm not sure how to properly migrate the code by reading the changelog to be honest.

Does this mean that we don't need to check for the inline property at all and it's handled differently?

[Murderlon]

This is some pseudo-code I typed without testing but probably something like this. I think you can also use pre: () => {} in components for code block components.

import {visit} from 'unist-util-visit'

function rehypeInlineCodeProperty() {
  /**
   * @param {import('hast').Root} tree
   * @returns {undefined}
   */
  return function (tree) {
    visit(tree, 'code', function (node, index, parent) {
      if (parent && parent.tagName === 'pre') {
        node.properties.inline = false;
      } else {
        node.properties.inline = true;
      }
    })
  }
}

[github-actions[bot]]

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks, — bb

[AlphaNecron]

And how do we get code language like using class-name in v8?

[wooorm]

That didn’t change.

[AlphaNecron]

It does not work at all, className is undefined

[wooorm]

Nope.

Can you read the support guide on how to ask questions: you need to provide information.

[AlphaNecron]

In v8, I was able to get the language of above code using className prop. However, in this release, there's no className or props passed to pre at all. I removed the custom renderer of pre and DevTools shows this:

[AlphaNecron]

Nevermind, the actual props were passed to inner code element.

[Murderlon]

Take a look at this example. You probably want to use code not pre for this: https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight

[AlphaNecron]

Thanks.