mdx 3 converts component elements to p tag
Heet-Bhalodiya opened this issue · comments
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- 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'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>
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
You can search through closed issues or read the docs.
Such as: https://mdxjs.com/docs/what-is-mdx/#interleaving.
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?
You can use an expression to use plain JSX instead of MDX.
{
<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>
}
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>