microsoft / microsoft/TypeScript

TSX error location error with location and JSX comment

Open
#63,358 3 comments 0 reactions 0 assignees View on GitHub
Bug Domain: JSX/TSX Needs Human Review Needs More Info
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

### 🔎 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

```ts
export class Component {

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


{/* */}
{location}


// These similar versions are all fine
content2 = () =>


{/* */}
{x}


content3 = () =>


{location}


content4 = () =>


{/* */}
{location}

content5 = () =>




{location}
{/* */}

}
```

### 🙁 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.

Contributor guide

Open the contributing guide

Research direction

Start with the linked TypeScript Playground reproduction and inspect how the compiler assigns a diagnostic span for the JSX children containing a comment and {location}. Trace the JSX diagnostic location, then add regression coverage for this example and verify that the error is reported on {location} rather than the JSX comment.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.