prettier: MDX parsing error for components that are not self-closing (fixed, but not yet released)

Prettier 1.19.1 Playground link

--parser mdx

Input:

---
title: Home
---

import { Link } from "gatsby"

# Page title

Some paragraph

<Link to="/somewhere-else/">Go somewhere else</Link>

Output:

SyntaxError: Void elements do not have end tags "Link" (1:46)
> 1 | ---
    |    ^
  2 | title: Home
  3 | ---
  4 |

Expected behavior:

This should not throw an error as it is valid MDX.

The following does not throw an error (Playground link):

<Link to="/somewhere-else/" label="Go somewhere else" />

It seems that the error is coming from the component not being self-closing.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 17 (10 by maintainers)

Commits related to this issue

Update prettier to work around MDX bug Have to use the github version of prettier right now because parsing of every markdown file with the tabs component fails otherwise. https://github.com/prettier... — committed to geocortex/dev-center by Noah-Silvera 4 years ago

Most upvoted comments

@JDansercoer Hopefully, Prettier 2.0 will be out in January. Follow #6888 for details. As for installing from GitHub, see https://docs.npmjs.com/cli/install.

thorn0 on Jan 9, 2020

@detj

https://github.com/prettier/prettier/pull/6773

Playground

fisker on Feb 10, 2020

Indeed there is something strange happening with MDX in Prettier 1.19.1

✅ <Linc to="x">y</Linc>
❌ <Link to="x">y</Link>

✅ <div foo="bar">abc</div>
❌ <div foo={{ bar: true }}>abc</div>

✅<></>
✅ <Playground></Playground>
❌ <Playground><></></Playground>

This seems to be a new behaviour in 1.19 – the above examples did work in 1.18.x. Sadly, we are blocked by these oddities in MDX and have to stick with 1.18 for now. Prettier 1.19 is required to start using TypeScript 3.7 awesome features, so if anyone has ideas, please help 🙏

cc @JounQin (author of #6332 and #6340, which are mentioned in 1.19 blog post)

kachkaev on Jan 6, 2020

I think https://github.com/prettier/prettier/pull/6949 is the one

fisker on Feb 27, 2020

It has been fixed.

thorn0 on Feb 24, 2020

@thorn0 Isn’t it misleading to close this when it hasn’t been fixed? A better practice IMHO would instead be to reference it in the PR that will solve it (#6773 as far as I understand).

robinmetral on Feb 24, 2020

@JDansercoer Try installing Prettier master from GitHub ("prettier": "prettier/prettier" instead of "prettier": <version number> in your package.json).

thorn0 on Jan 9, 2020

Yes, fixed, but not yet released. Let’s keep this issue open for a while, so that people can see it.

thorn0 on Jan 6, 2020