The issue involves React Compiler's handling of non-null assertions, requiring deep compiler knowledge.
The issue involves React Compiler incorrectly handling non-null assertions in TypeScript, leading to runtime errors. The fix requires understanding and modifying the compiler's handling of nullable values, particularly in the PropagateScopeDeps pass. The maintainers have acknowledged the issue and started some work, but it remains unresolved.
running the following code will result in a Cannot read properties of null (reading 'test')
interface Test{
test: string;
}
export const TestBroken = () => {
const [test, setTest] =
React.useState < Test | null > (null);
return (
<>
<button onClick = {() => test == null ? setTest({test:"test"}) : setTest(null)}> Toggle </button>
<button disabled={!test} onClick= {() =>console.log(test!.test)}> Print </button>
</>
)
}
this code runs fine when changing the non-null assertion into an if statement:
- <button disabled={!test} onClick= {() =>console.log(test!.test)}> Print </button>
+ <button disabled={!test} onClick={() => { if (test) console.log(test.test) }}> Print </button>
Every time
19.1.0
19.1.0-rc.1
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!