TSX error location error with location and JSX comment

🔎 Search Terms

TSX JSX error location comments

🕗 Version & Regression Information

• This changed between versions 4.9.5 and 5.0.4.

In TS4 the error was created on the wrapping element instead, which prevents the issue occurring.

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=6.0.2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCpAD0ljjQBsUBnFuAYV0gDskf4AbwoU4YuAHoJcACoBPMEgIAZCGhQxgEHvjjB2PCPFYtgAcx4oARoyUwIcGAqX5k6GADkIAEyT4AdAAUAEwAzMHBAJSi4lJwAMoAFhAArozecFZKieaJjLmaPGZwgoxqGlo8AL5whkISAFRiDRI1MWJo2jD88AC8cIGRcL0AfO3iYgA83sAAbmPkE0vigo3NrXDjy2Kl5ZraVVvbk1ZQkgvbcJMSM-Mii7HSMolILEqmIMDMZ7NIUKbadgoIhwFCMRhwTDAPjjToCHrBYYDIajI5TW4XS4rNZwFqHB5YkrUfGEqanc5oq43OYLWFdHqhJGDYaY5bTGmUia7dT7aqc8QnM4SVlLa4Y+4TOHdAQAFiZKJFE3ZdwJWNWTVxrX5OzKPMqJOO1JVdPhAgArPKWZTlYrjuThdqSrqKgdHer1ga2UbaeR8fc4jJ4ld+nLoZgIP44AAFHBWayMOSZV7wex6CzQJQoHgZcNoFLsbQMFJQIgCWTxf1PINy6wQX4MIgaV6gnhwP44M6FmAvOC3PQ8FjdFDeSMAVVMRVBcAAYlAUGYQD04GY5s3DG2S9BIVuWLglI3dzwqLRoPAmCZONxtD1A3LhJRVVKegAGS2jK4Y7ku6pijkPyX0gIz6vv0zLvpMIxfryVTXD6AGmn0yJWqqSq2ss7qam0KHbFB+qbNhbL2mhVJweIT4CIioEKtaxFcjieJusSjqChSBEkRKZGATAjJUchlwQW6zrQcxRHWg6-6cQhcq8aibECWxdEagxCkrEJ+piaRHRcRaMnEfJpJXKJKk6ns6nGSU9FanJ4kUPiQA

💻 Code

export class Component {

    // Error message for {location} is shown on {/*  */} instead
    // Type 'Location' is not assignable to type 'ReactNode'.(2322)
    content = () =>
        <div>
            {/*  */} 
            {location}
            <br />
        </div>

    // These similar versions are all fine
    content2 = () =>
        <div>
            {/*  */}
            {x}
            <br />
        </div>

    content3 = () =>
        <div>
            {location}
            <br />
        </div>

    content4 = () =>
        <div>
            {/*  */}
            {location}
        </div>

    content5 = () =>
        <div>
            <br />
            {location}
            {/*  */}
        </div>

}

🙁 Actual behavior

The red squiggly is shown on the {/* */} instead of {location} in the first example.

🙂 Expected behavior

The red squiggly should be shown on {location}.

Additional information about the issue

Just a minor issue.

Inizia con la riproduzione collegata in TypeScript Playground e analizza il modo in cui il compilatore assegna un intervallo diagnostico ai figli JSX che contengono un commento e {location}. Segui la posizione della diagnosi JSX, quindi aggiungi la copertura di regressione per questo esempio e verifica che l'errore venga segnalato su {location} anziché sul commento JSX.