Skip to content

formatter: Incorrectly moves trailing comment from inside ternary expression to outside, creating a JSX Text Node #18419

@rubenferreira97

Description

@rubenferreira97

When a block comment /* ... */ is located inside the else branch of a ternary expression (within the JSX expression container), the formatter moves it outside the closing curly brace }.

This changes the semantics of the code:

  • Before: It is a JavaScript comment (ignored).
  • After: It becomes a JSX Text Node sibling. This causes the text /* ... */ to be rendered in the browser, or triggers a "compile error" in strict linting environments (e.g., react/jsx-no-comment-textnodes).

Minimal Reproduction

Input Code (Valid Comment):

const Component = () => (
  <Form.Item>
    {'error' ? (
      <Error />
    ) : (
      <Success />
      /* This is a comment inside the expression */
    )}
  </Form.Item>
);

Actual Output (Bug - Comment moved outside):

const Component = () => (
  <Form.Item>
    {'error' ? (
      <Error />
    ) : (
      <Success />
    )}
    /* This is a comment inside the expression */
  </Form.Item>
);

Expected Output:
The comment should remain inside the expression container so it functions as a comment, not a text node.

const Component = () => (
  <Form.Item>
    {'error' ? (
      <Error />
    ) : (
      <Success />
      /* This is a comment inside the expression */
    )}
  </Form.Item>
);

Playground link

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions