oxc-project/oxc · warning · OxcDiagnostic

Comments inside children section of tag should be placed ins

Error message

Comments inside children section of tag should be placed inside braces

What it means

Diagnostic from react/jsx-no-comment-textnodes. JSX has no comment syntax, so text beginning with // or /* inside the children of a JSX element is not a comment — it renders as literal text in the DOM. The rule flags such strings to catch developers who assume JS comment syntax works inside markup. The correct way to comment inside JSX is to wrap it in an expression container: {/* comment */}.

Source

Thrown at crates/oxc_linter/src/rules/react/jsx_no_comment_textnodes.rs:13

use oxc_ast::AstKind;
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{
    AstNode,
    context::{ContextHost, LintContext},
    rule::Rule,
};

fn jsx_no_comment_textnodes_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Comments inside children section of tag should be placed inside braces")
        .with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct JsxNoCommentTextnodes;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being
    /// accidentally injected as a text node in JSX statements.
    ///
    /// ### Why is this bad?
    ///
    /// In JSX, any text node that is not wrapped in curly braces is considered
    /// a literal string to be rendered. This can lead to unexpected behavior
    /// when the text contains a comment.
    ///

View on GitHub (pinned to e1e7af627c)

Solutions

Convert the intended comment to a JSX expression container: {/* TODO: fix this */}
If the text is real copy that starts with //, rephrase it or render it from an expression: {'//path-like text'}
Remove commented-out markup instead of leaving it in children
Disable the rule for that line with an oxlint-disable comment if the literal-slash text is intentional

Example fix

// before
<div>
  // TODO: wire up submit
  <button>Go</button>
</div>

// after
<div>
  {/* TODO: wire up submit */}
  <button>Go</button>
</div>

Defensive patterns

Strategy: validation

Validate before calling

npx oxlint -D react/jsx-no-comment-textnodes src/

Prevention

Use {/* ... */} for JSX comments — never // or /* */ as bare text children
Delete commented-out JSX instead of leaving it in children sections
If literal copy must start with //, render it via an expression container {'//...' } so intent is explicit

When it happens

Trigger: <div>// TODO: fix this</div>, <p>/* temporary */</p>, or a child text node that merely starts with // or /* (e.g. <span>//slash-prefixed copy</span>). The rule matches the text-node content, so any children-section string starting with those tokens triggers it.

Common situations: Developers new to JSX pasting JS-style comments into markup; commented-out copy left in components; regex-ish or path-like copy that begins with // (e.g. protocol-relative URLs rendered as text) triggering false positives.

Related errors

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/7399b721f490655e. Report an issue: GitHub.