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

[robinmetral]

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.

[kachkaev]

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]

The above issues could have been fixed by #6949. Playground for that PR:

✅ <Link to="x">y</Link>
✅ <div foo={{ bar: true }}>abc</div>
✅ <Playground><></></Playground>

Looking forward for 1.19.2 / 1.20.0 / 2.0.0 👀 🙏

[thorn0]

Duplicate of #6943

[thorn0]

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

[JounQin]

Sorry for my fault, it reminds me that any changes of such OSS effect a lot of users.
Cheers.

[RareSecond]

@kachkaev Not sure if this is a worthy addition to the discussion, but downgrading to 1.18.2 does not solve it. So maybe there's another underlying problem?

["INFO" - 12:38:24 PM] Formatting /xx/src/pages/index.mdx
["INFO" - 12:38:24 PM] Loaded module 'prettier@1.18.2' from '/xx/node_modules/prettier/index.js'
["INFO" - 12:38:24 PM] Using ignore file (if present) at /xx/.prettierignore
["INFO" - 12:38:24 PM] File Info:
{
  "ignored": false,
  "inferredParser": "mdx"
}
["INFO" - 12:38:24 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:38:24 PM] Prettier Options:
{
  "filepath": "xx/index.mdx",
  "parser": "mdx",
  "singleQuote": true,
  "trailingComma": "es5",
  "proseWrap": "always"
}
["ERROR" - 12:38:24 PM] Error formatting document.
Void elements do not have end tags "Link" (1:45)

Also using the same code example as said in the OP.

[thorn0]

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

[RareSecond]

@thorn0 "prettier/prettier" seems to work, thanks! Any idea when it will be released?

Also, maybe little bit off-topic, but how does the resolving to "prettier/prettier" work? Can't seem to find documentation on that. I only remember every including a direct link to Github?

[thorn0]

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

[detj]

Is this error related to this issue?

<div style={{width: '100px'}}></div>

Playground

[fisker]

@detj

#6773

Playground

[robinmetral]

@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).

[thorn0]

It has been fixed.

[robinmetral]

Not in the latest, playground

[millette]

@robinmetral Hello Robin :-)

It's fixed in master, you can install (if you like bleeding edge, or just to test it):

npm install prettier/prettier

After, you should see in package.json:

{
  "dependencies": { 
    "prettier": "github:prettier/prettier"
  }
}

Amongst others.

It works for me ™

[robinmetral]

Thanks for the info Robin @millette 🙂

Can you point me to which PR fixed it? Another follow-up question would be why a bugfix merged to master doesn't trigger a release 😉

[fisker]

I think #6949 is the one