@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

Comienza con la reproducción vinculada en TypeScript Playground y compara los dos casos de JSX en los que @ts-expect-error se coloca antes de una expresión hija. Rastrea cómo se asocian los diagnósticos de hijos JSX y las ubicaciones de las directivas, y verifica después que la directiva suprime el error previsto sin producir un diagnóstico de directiva no utilizada.