@ts-expect-error not ignoring next line correctly in JSX, and errors are reported on the same line

🔎 Search Terms

"tsx expect error", "jsx expect error"

🕗 Version & Regression Information

It seems as though @ts-expect-error reports errors on the wrong line, when used inside JSX. For example:

function TestNotIgnoring() {
    return <Component>
    <div />
    {/* @ts-expect-error */} <-- error
    {child}
    </Component>
}

function TestIgnoring() {
    return <Component>
    {/* @ts-expect-error */}
    {child}
    </Component>
}

The error in this case is:

Type 'ReactNode | Element' is not assignable to type 'ReactNode'.
  Type 'Element' is not assignable to type 'ReactNode'.
    Type 'Element' is missing the following properties from type 'ReactPortal': type, props, key(2322)
Unused '@ts-expect-error' directive.(2578)

I would have expected no error though, given that that's the behavior when other children are added. Other examples that work are:

function TestIgnoringOnLineAbove() {
    return <Component>
    {/* @ts-expect-error */} <-- moved expect *above* the div, works correctly
    <div />
    {child}
    </Component>
}

I'd expect this to not work though, given that the error is actually on the line with {child} in it

⏯ Playground Link

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKCswFcA7DYCeuAYV0nqXpgAoA3lTgi4aABbAANgBMi9KgF8AXHAFxhoidLk9VydDAB0BjADkIMpEoCUazSKIxaUVgB4ZwAG4A+Adtl5RTcAek9fJSoqNBYAZ3gAmTgAXgIAUQAPFHApJHw4FFi4PlNjUosrOAAfODTckB4YGyjKOkYYZlYAFSR4ixgASQBzemhgeiG+OyFKUTgnF3cOcBZGnwc4D284EPXZ0QEQgCo4AAEYWIBaJAywJAxrqBwoOCOQxQ3-SVkP-ZFQ5ZcNaRaitBhMFhwHrxYajKDjSbTDYLVybQGrXh7OaHE7nK43O4PJBPaCvd6fRK-OYAzgYmB7X40cEdSHQwYjMYTADy9AAMuMkABBABGEC8SCm9j+8yQzlRbnR3Exn2OZwu11u9xgj2eZKpoi2Xh2WIOlI2NJWSvpSiAA

💻 Code

import React from 'react';

function Component({
    children
}: { 
    children: React.ReactNode
}) {
    return <div>{children}</div>
}

const child = 'Example' as (React.ReactNode | Element)

function TestNotIgnoring() {
    return <Component>
    {/* @ts-expect-error */}
    <div />
    {child}
    </Component>
}

function TestIgnoring() {
    return <Component>
    {/* @ts-expect-error */}
    {child}
    </Component>
}

function TestIgnoringOnLineAbove() {
    return <Component>
    {/* @ts-expect-error */}
    <div />
    {child}
    </Component>
}

🙁 Actual behavior

@ts-expect-error was reported unused, and an error was reported on the line including ts-expect error

🙂 Expected behavior

@ts-expect-error should suppress the error, regardless of whatever other elements are added as children prior to the element.

Additional information about the issue

No response

Inizia con la riproduzione collegata in TypeScript Playground e confronta i due casi JSX in cui @ts-expect-error è posizionato prima di un'espressione figlia. Traccia il modo in cui vengono associati i diagnostici degli elementi figli JSX e le posizioni delle direttive, quindi verifica che la direttiva sopprima l'errore previsto senza produrre un diagnostico di direttiva inutilizzata.