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.

Bắt đầu với bản tái hiện TypeScript Playground được liên kết và kiểm tra cách compiler gán phạm vi chẩn đoán cho các JSX children chứa một comment và {location}. Theo dõi vị trí chẩn đoán JSX, sau đó thêm coverage hồi quy cho ví dụ này và xác minh rằng lỗi được báo cáo tại {location} thay vì tại comment JSX.