mdx 3 converts component elements to p tag

[Heet-Bhalodiya]

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

v3.0.0

Link to runnable example

No response

Steps to reproduce

I am using node v20.9.0

<Typography>
  Please refer to MUI&#39;s official docs for more details on component&#39;s{' '}
  <Link href='https://mui.com/material-ui/react-alert/' target='_blank' rel='noopener noreferrer' className='no-underline'>
    usage guide
  </Link>{' '}
  and{' '}
  <Link href='https://mui.com/material-ui/react-alert/#api' target='_blank' rel='noopener noreferrer' className='no-underline'>
    API documentation
  </Link>
  .
</Typography>

using above code in mdx file I am getting following errors which was not there in the mdx version 2.

Expected behavior

Actual behavior

mdx 3 converts component elements to p tag which lead to <p> cannot appear as a descendant of <p> error

Runtime

Other (please specify in steps to reproduce)

Package manager

pnpm

OS

macOS

Build and bundle tools

Docusaurus

[wooorm]

You can search through closed issues or read the docs. Such as: https://mdxjs.com/docs/what-is-mdx/#interleaving.

[Heet-Bhalodiya]

Hello @wooorm,

I am using multiline as I mentioned in above code that I am using Link component inside Typography. So I can't write all these code in one line. So what should I do now?

[remcohaszing]

You can use an expression to use plain JSX instead of MDX.

{
<Typography>
  Please refer to MUI&#39;s official docs for more details on component&#39;s{' '}
  <Link href='https://mui.com/material-ui/react-alert/' target='_blank' rel='noopener noreferrer' className='no-underline'>
    usage guide
  </Link>{' '}
  and{' '}
  <Link href='https://mui.com/material-ui/react-alert/#api' target='_blank' rel='noopener noreferrer' className='no-underline'>
    API documentation
  </Link>
  .
</Typography>
}

[wooorm]

So I can't write all these code in one line.

It doesn’t have to be on one line. That’s not what the text says. For example:

<Typography>Please refer to MUI’s official docs for more
details on component’s <Link href='https://mui.com/material-ui/react-alert/'
target='_blank' rel='noopener noreferrer' className='no-underline'>usage guide
</Link> and <Link href='https://mui.com/material-ui/react-alert/#api'
target='_blank' rel='noopener noreferrer' className='no-underline'> API
documentation</Link>.</Typography>