Eslint-plugin-react: jsx-curly-brace-presence and jsx-no-comment-textnodes conflict with each other

[nwalters512]

I have both react/jsx-curly-brace-presence and react/jsx-no-comment-textnodes enabled. I want to render the string /* as the child of a component:

const Component2 = () => {
  return <span>/*</span>;
};

This errors for react/jsx-no-comment-textnodes as expected:

/sandbox/src/Component.jsx
  8:16  error  Comments inside children section of tag should be placed inside braces  react/jsx-no-comment-textnodes

Per the docs for react/jsx-no-comment-textnodes, I should be able to use curly braces to fix this:

const Component2 = () => {
  return <span>{'/*'}</span>;
};

However, this now errors for react/jsx-curly-brace-presence:

/sandbox/src/Component.jsx
  4:16  error  Curly braces are unnecessary here                 react/jsx-curly-brace-presence

Playing whack-a-mole with linter errors won't get me anywhere here. I could always disable one of the rules for this file, but ideally react/jsx-curly-brace-presence could be smart enough to know that this is something that needs to be in curly braces because of other rules in play and not report this particular code as an error.

Codesandbox (fork and run yarn lint from the terminal): https://codesandbox.io/s/cocky-darwin-1zfs5?file=/src/Component.jsx

[ljharb]

Thanks for the repro!

I'm having trouble reproducing this - the test cases pass (the curly-brace-presence warning doesn't appear), both in my local tests and in your codesandbox.

Are you sure you're using the latest version of eslint-plugin-react locally?

[nwalters512]

This is what I see when I run yarn lint in the sandbox:

sandbox@sse-sandbox-1zfs5:/sandbox$ yarn lint
yarn run v1.22.4
warning package.json: No license field
$ eslint --ext js --ext jsx src
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

/sandbox/src/Component.jsx
  4:16  error  Curly braces are unnecessary here      react/jsx-curly-brace-presence
  8:16  error  Comments inside children section of tag should be placed inside braces  react/jsx-no-comment-textnodes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Can you show me what output you get for yarn lint? I also realized I wasn't explicit about how the rules were configured in my original post. Here's a verbatim copy of what's in the codesandbox:

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": { "ecmaVersion": 6, "sourceType": "module" },
  "rules": {
    "react/jsx-curly-brace-presence": [
      "error",
      { "props": "never", "children": "never" }
    ],
    "react/jsx-no-comment-textnodes": "error"
  }
}

[ljharb]

Is there a way I can just clone the sandbox directly?

The passing tests I landed in bb2b8db use the same eslint config as in the sandbox.

[nwalters512]

There doesn't seem to be a way to clone a sandbox directly. Here's a new repo that contains the same test case, along with instructions on how to reproduce: https://github.com/nwalters512/eslint-plugin-react-conflicting-rules-repro

Following my own instructions, I see the following output for yarn lint:

yarn run v1.22.4
$ eslint --ext js --ext jsx src
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

/Users/nwalters/git/eslint-plugin-react-conflicting-rules-repro/src/Component.jsx
  4:16  error  Curly braces are unnecessary here                                       react/jsx-curly-brace-presence
  8:16  error  Comments inside children section of tag should be placed inside braces  react/jsx-no-comment-textnodes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ljharb]

Thanks, I was able to reproduce and make a fix/test.

[nwalters512]

Thanks much!