@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