@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

Commencez par la reproduction liée dans TypeScript Playground et comparez les deux cas JSX où @ts-expect-error est placé avant une expression enfant. Suivez la façon dont les diagnostics des enfants JSX et les emplacements des directives sont associés, puis vérifiez que la directive supprime l’erreur attendue sans produire de diagnostic de directive inutilisée.