Strange behaviour of `react/jsx-curly-brace-presence`/`react/self-closing-comp`

[dimaMachina]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

2.0.5

Link to runnable example

No response

Steps to reproduce

// test.mdx

```jsx
let a = (
  <App prop="foo">{'bar'}</App> // ❌ error  Curly braces are unnecessary here  react/jsx-curly-brace-presence
)
```

<App prop="foo">{'bar'}</App> // 😬 nothing here

and

```jsx
let a = <App prop={'foo'}>bar</App> ❌ error  Curly braces are unnecessary here  react/jsx-curly-brace-presence
```

<App prop={'foo'}>bar</App> ❌ error  Curly braces are unnecessary here  react/jsx-curly-brace-presence / error  Empty components are self-closing  react/self-closing-comp

Expected behavior

should report only react/jsx-curly-brace-presence errors

Actual behavior

reports react/jsx-curly-brace-presence and react/self-closing-comp

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[dimaMachina]

repro https://github.com/B2o5T/mdx-repro

[u3u]

Why is this happening? I'm not sure if there are any other rules that could cause strange issues, which makes me fearful of eslint-mdx. 😱

❌ Empty components are self-closing eslint(react/self-closing-comp)
<span>test</span>

💡 Fix this react/jsx-sort-props problem
<Image alt="alt" src="src" width="315" height="100" format="svg" />
↓↓↓↓↓
<Image alt="alt" format="src" height="315" src="100" width="svg" />

[JounQin]

This happens because we don't know whether it's self-closing from mdx AST.

cc @wooorm

---

@u3u I don't know what's your meaning.

[u3u]

@JounQin There are serious issues when used with the react/self-closing-comp / react/jsx-sort-props rules.

1. <span>test</span> Regarded as an empty tag self-closing, it will be fixed to <span />, directly losing the content.
2. After automatic sorting of JSX attributes, the content and attributes no longer correspond.

[JounQin]

@u3u Please raise a new issue with online runnable reproduction, it seems a different issue from this one, and I've never met.

[u3u]

@JounQin Clone this repository https://github.com/u3u/eslint-config, and input the above content in any mdx file to reproduce.

[JounQin]

@u3u A new issue please, we must track different issues.

[wooorm]

<App prop="foo">{'bar'}</App> // 😬 nothing here

MDX is not JSX. There is a difference. <x>*a*</x> vs <x>{'*a*'}</x> are different.

This happens because we don't know whether it's self-closing from mdx AST.

Indeed. The AST is supposed to be simple and changeable.

What has self-closing to do with this example? It’s not a self-closing JSX element?

[JounQin]

What has self-closing to do with this example? It’s not a self-closing JSX element?

react/self-closing-comp rule is referenced, so I said it's related to self-closing. Is that possible to add such property for mdx nodes?

[wooorm]

It shouldn’t be in the AST.

ASTs are about simplifying things. Not about presenting everything. Similar to how whether " or ' was used is not in ASTs. That’s what CSTs are.

[JounQin]

OK, let's skip this part.

[JounQin]

What has self-closing to do with this example? It’s not a self-closing JSX element?

I think that's because the jsx content is not included or incorrect in the AST, so react/self-closing-comp rule does not recognize the jsx content correctly.

MDX is not JSX. There is a difference. a vs {'a'} are different.

Similar to react/self-closing-comp rule and AST difference mentioned above, react/jsx-curly-brace-presence does not recognize the content correctly.

---

I'll take a look how can I fix them.