JSX components require a leading newline in MDX v2 but not v1
See original GitHub issueSubject of the issue
In MDX v2 a block JSX component appears to require a newline. This is a breaking change since v1. If this is intentional it should probally be documented and this can be closed.
Your environment
N/A can be reproduced in the v2 playground https://mdx-git-next.mdx.vercel.app/playground.
Steps to reproduce
Enter the following in both the v1 https://mdxjs.com/playground and v2 https://mdx-git-next.mdx.vercel.app/playground playgrounds.
Some text...
<Box>
I'm in a box!
</Box>
Expected behaviour
Should parse in both unless this is a known breaking change in v2.
Actual behaviour
2:6: Unexpected end of file in element, expected a corresponding MDX closing tag for `<Box>` (2:1-2:6)
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
MDX and React - Docusaurus
Docusaurus has built-in support for MDX v1, which allows you to write JSX within your Markdown files and render them as React components....
Read more >Options - Prettier
This effectively allows using the json5 parser for “JSON with comments and trailing commas”. JSX Quotes. Use single quotes instead of double quotes...
Read more >Create a responsive NavBar React component with Chakra UI
TLDR: It's a step-by-step guide to building a Chakra UI v1.0 fully-responsive NavBar (aka Header or Top Navigation bar) React Js component ......
Read more >Prettier 2.3. In which assignments are consistent, short keys ...
Prettier 2.3 avoids line breaks after property names shorter than tabWidth + 3 ... The feature is called “Ember / Handlebars” and not...
Read more >@docusaurus/mdx-loader | Yarn - Package Manager
Docusaurus 2 Changelog. 2.0.0-rc.1 (2022-07-14). :bug: Bug Fix. docusaurus. #7776 fix(core): swizzle --eject js should not copy theme .d.ts files (@slorber) ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think that would be super useful, yeah! 💪
This is no longer an issue as it now works, it’s allowed, in the last RC (I wouldn’t recommend it though!). Please see the migration docs for guidelines on the difference between authoring in v1 and v2 though: https://v2.mdxjs.com/migrating/v2/.