question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JSX components require a leading newline in MDX v2 but not v1

See original GitHub issue

Subject 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)

2020-08-26_17-02-21

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
wooormcommented, Aug 29, 2020

I think that would be super useful, yeah! 💪

0reactions
wooormcommented, Oct 19, 2021

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/.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found