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

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

[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?

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.

[JounQin]

@dimaMachina @u3u

Please help to test the part of react/jsx-curly-brace-presence andreact/self-closing-comp.

# yarn 1
yarn add https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-mdx https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-plugin-mdx
# yarn 2, 3
yarn add eslint-mdx@https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-mdx/_pkg.tgz eslint-plugin-mdx@https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-plugin-mdx/_pkg.tgz
# npm
npm i https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-mdx https://pkg.csb.dev/mdx-js/eslint-mdx/commit/c3d7aedb/eslint-plugin-mdx

[JounQin]

v2.2.1 has already been released.