prettier: MDX: support Markdown inside JSX blocks

Sure, although it has been fixed actually. 🤣

Where has this been fixed? In an unreleased version of Prettier?

Ah actually, thanks to @kachkaev’s comment (https://github.com/prettier/prettier/issues/7176#issuecomment-571218217), I just tried adding "prettier": "prettier/prettier" to my devDependencies and it seems to format with all examples here! 🚀

So it looks like this will be fixed as soon as Prettier 1.20.0 or 1.19.2 is released. 🙌

Workaround for now:

Change your version of Prettier in your package.json to "prettier": "prettier/prettier". If you’re using VS Code, this new local version will be picked up automatically by prettier-vscode.

This issue has been solved for me via npm i -D prettier@latest

@cpboyd Please try yarn add -D prettier@prettier/prettier, it’s duplicate of #7176

@pomber Depends on what you call “to work”. It might kind of work again in the next version because of https://github.com/prettier/prettier/pull/6949. The SyntaxError should get fixed, but Prettier won’t really format JSX blocks with Markdown inside. It’ll just leave them as is like it currently does with inline JSX. So if someone here is blocked by this issue, consider installing Prettier directly from GitHub (npm install prettier/prettier) until this fix is released.

To my knowledge, there is no playgrounds for older versions.

MDX v2 is out:

• https://github.com/mdx-js/mdx/releases/tag/2.0.0
• https://mdxjs.com/blog/v2/

The example attached to this issue may become pretty common soon 🤔

It seems like there’s an issue with using style={{}} on a multi-line tag:

---
title: Contact
---

import { Button } from '@rmwc/button';

# Contact

<Button
  raised
  style={{ margin: '8px' }}
>
  Message Me
</Button>

I’m getting this: error Parsing error: Unexpected closing tag “Button”. It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

Edit: Also, there’s the potential for JSX tags within an attribute that should maybe be considered too, like:

<Button
  raised
  icon={<Icon />}
>
  Message Me
</Button>

It seems to be less related to the attribute and more to do with curly brackets on an attribute.

Let’s continue the discussion here:

• https://github.com/prettier/prettier/issues/12209

@Kosai106 --require-pragma will ignore all files without a pragma at the top of the file. MDX pragma:

<!-- @prettier -->

So it was just disabling Prettier for that file. If you try with --require-pragma and the pragma above, you’ll have the same errors again.

Ref: https://prettier.io/docs/en/options.html#require-pragma

What is the question? If it is whether the following is valid MDX, then yes, it is.

<CodeSurfer>

```js
console.log(1);
```

</CodeSurfer>

It’s a different error though. It happens only on the playground.

Ah, in my comment above I missed your point about “if a JSX block is found, it’s passed to Babel”… maybe that’s the reason for this inconsistency?