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

[jpnelson]

🔎 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

[TheWerbinator]

I am also experiencing this issue on TypeScript v5.4.5, which is currently the latest. I also tried with the most recent nightly build but it didn't resolve it. Unlike Joshua Nelson (@jpnelson), no amount of repositioning worked - outside the parent div or otherwise.