When Text Nodes are used on the same line as a closing tag, it crashes MDX
Ayc0 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
@mdx-js/mdx 2.2.1
Link to runnable example
No response
Steps to reproduce
Go to https://mdxjs.com/playground/, and write this:
<div>
asd
</div>.Expected behavior
As all of:
-
<div> asd </div> .
-
<div>asd</div>.
-
<div>asd </div>.
work, and as they should create the same AST, I'd expect that the input code would work too.
Actual behavior
<div>
asd
</div>.This code throws:
example.mdx
3:1-3:7 error Expected the closing tag `</div>` either after the end of `paragraph` (3:8) or another opening tag after the start of `paragraph` (2:1) end-tag-mismatch mdast-util-mdx-jsx
✖ 1 error
Note: the following crashes too:
<div>
asd
</div>.Runtime
Node v16, but also just Chrome as the bug is visible in the live playground.
Package manager
As it's visible in the live playground, I don't think it's relevant.
OS
macOS
Build and bundle tools
As it's visible in the live playground, I don't think it's relevant.
Yes. This is expected. It is ambiguous what you want to happen. The error message tells you what to do. You need to be explicit. If you want the text inside the div to be a paragraph:
<div>
asd.
</div>
If you don’t:
<div>asd</div>.
Sometimes (and specially due to prettier), we don't really have the choice though 😕
Like if we want to do:
<div><p>This is some fake text, it's too long on purpose <a href="/really/really/really/really/really/really/really/long/link">here</a> and here is the end of the text.</p></div>This compiles properly:
But when we run this through prettier, it generates:
<div>
<p>
This is some fake text, it's too long on purpose{" "}
<a href="/really/really/really/really/really/really/really/long/link">
here
</a>{" "}
and here is the end of the text.
</p>
</div>
But this newly formatted text doesn't work anymore in MDX:
it throws this error:
example.mdx
6:5-6:9 error Expected the closing tag `</a>` either after the end of `paragraph` (7:37) or another opening tag after the start of `paragraph` (5:7) end-tag-mismatch mdast-util-mdx-jsx
✖ 1 error
Prettier is still catching up with MDX 2, see prettier/prettier#12209 for the ongoing discussion and progress
Prettier is still catching up with MDX 2, see prettier/prettier#12209 for the ongoing discussion and progress
I cross posted the issue in this other thread 🙇