Skip to content

JSX tag and attribute names starting with # are accepted without a syntax error #65396

Open

Description

@elecmonkey

🔎 Search Terms

jsx private identifier, jsx tag name hash, jsx attribute name hash, jsx identifier expected, invalid jsx emit

🕗 Version & Regression Information

  • This is the behavior in every version I tried (6.0.3, 7.0.2, and nightly 7.1.0-dev.20261108.1), and I reviewed the FAQ for entries about JSX

⏯ Playground Link

https://www.typescriptlang.org/play/v2/?ts=next#code/v2/N4IghgxgLglgbgUwGIwDYJALhAegO4D2ATgNYDOADpAjmURDjAHYAmCAHgHRRnsgA0IAGZoEZLKHzFyVCDR4QCTEQHNOAKzJKsIYAB0mAAkN6QigLYVRRAPIVYSsqcyH9R4yZBkoRGNGeGPgCuCPwGHp6a7AGmRAiQUKbhhgC+BmlMAriEpJTUtPSMrBzcvDpsEKhgcYaKTN6GAErx0C5gTACeANwGFVU1TGDmYrIIhgBSAMoAGq7JxsxQCERC1IYAkkw+zGR+AKLow1tkc+4RxgDag8Mu3r5MKgC6bZ09Z6npBgZ1DWCGALyGAA8AGIwAA+IE4MHgt44HCGJSoDqGAAqkwATABmAAMABZDEIiARzIEABZjCAUiAkZZfJg-KCGABGAOBLHghhBrJwsIM8MMTAIhmWxKI30cTIgbKBHLgXIg-ySIEMvLhCKFIqIYol9SZLBlcq5LEwYzV-I1wtFxF1DTGgKBYEwIKEqr5TAFmutRBAKUEZAQ6GgMG0mFAFAIuwcTAAwgRUEFzJlMABGQQRqMhpgAGWYCAAconmcssGmvIGEMGlJMoNUoHGE0nS-6K1WmDW67mmAWiyXU36QIgiLtQxiUkA

💻 Code

declare const React: any;
declare namespace JSX {
    interface IntrinsicElements {
        [name: string]: any;
    }
}

const a = <#a></#a>;
// only TS2304 from the checker

const b = <div #b />;
// no error
const c = <div #c="" />;
// no error
const d = <div #d:e />;
// no error
const e = <a:#f />;
// no error

With "jsx": "react".

🙁 Actual behavior

JSX tag names and attribute names starting with # are parsed as ordinary identifiers, and no syntax error is reported:

  • <#a></#a> only reports TS2304: Cannot find name '#a'. from the checker. With noCheck, or in tools that only use syntactic diagnostics, nothing is reported.
  • #b, #c, #d:e, and a:#f in tag and attribute names are accepted with no error at all.

The emitted JavaScript is also invalid:

const a = React.createElement(#a, null);
const b = React.createElement("div", { "#b": true });

🙂 Expected behavior

A syntax error, as with <a.#g /> (TS1003: Identifier expected.). # is not a valid character in a JSXIdentifier, and Babel and oxc both reject these inputs.

Additional information about the issue

tokenIsIdentifierOrKeyword (token >= KindIdentifier) also matches KindPrivateIdentifier, so ScanJsxIdentifier and parseIdentifierNameErrorOnUnicodeEscapeSequence treat #a as a regular identifier. <a.#g /> errors only because parseRightSideOfDot checks for private identifiers first.

Metadata

Metadata

Labels

BugA bug in TypeScriptDomain: JSX/TSXRelates to the JSX parser and emitter

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions