Skip to content

[Compiler Bug]: Compiler incorrectly assumes non-nullability and lifts property access #34752

@pawelblaszczyk5

Description

@pawelblaszczyk5

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhHCA7MAXABAUQA8BDAWwAcAbBXAXlwAoBKOgPl2AB0Ndd0s8AbRgIw5TGAQAaXJOwAlUeKwIAunVxRJAZWzFsCADzBcAE33FkuDFEqVcAX1wAfDmYtWTAMwQJTAI2I4AGsrHBgASwwAcwBuXGwAT3IEK05wKDhEMDB0x3zXE3M9TwTk1Nx0hBgYCBg8pwdWBiKPa1t7ByZY7m5efhxcAAtiDFNqbUzssC9bSf9SCJyIzA0tBHwvHzhsfAA3BAxsBmY2Dj7eXGIc6uORMQkEADpi4gB+J6SUulp6dLApqJciAZOkACpDJayIbQSimXD+GhRPYQYJ+XCYSiJXAAdyGh3celwUIBWSBszs2IBCwi2AMpnS3V6PEuAwg1CelAg0RauB8fkCISs92UkheFie-ICQWCjiZLK6PQwF3Wm22x1OtHYXBZvAiXkYIse4r0Hy+NF+fwyZJyjPOusuIzGE0BOQp80Wy0wzCVl0cFwcMmESmNr1U8ouImwsB4DAuvEM-igdMw8cumAAwpQIiFaMBNdq0365IoHipea9SlLBaFKiADDh0jJzWlrdMGnLfX7HA4i2UUrR0kmU8qQGnWH2ABIIOwQXF1OFpwwAemH2EwE5Z8ocSpBaEwXgi0RQIAiFDqeHNbgACpQoNEogB5cjYFZYfJeWqkXAAckCiMoABaKh7yiQCRCCbBAPQCgImoGBl1MJZsB-JVuBaC5l2XGDyDg-Q3wAWQgUwKnSYg7HSbgnDAfCZgiURcFvUCMGfV8JG6PcwBhHEAEkjmqDByLAFAvCEhAHCAA

Repro steps

I'm using React Router fetchers for mutations, while migrating the app to 19.2.0 and trying to migrate some useRef() latest pattern to useEffectEvent I spotted weird bug with something being accessed despite being undefined at render.

Basically, having a function that's supposed to be invoked only when some state is in shape X (e.g. successful response) eagerly accesses state that this function uses to cache it. It causes the error "cannot read property of undefined" error to occur

Image
  1. I'm having a state which is an union of few different states (in original example this is RR useFetcher)
  2. I'm having a useEffectEvent callback that's supposed to be called within useEffect when data becomes successful, additionaly I have an assertion so TypeScript allows me to access the .feedback part and no-one tries to invoke the callback otherwise
  3. Mentioned useEffect that invokes (2)
  4. User action invokes state change (in original example this is asynchronous, and happens in background, hence useEffect usage at all).

In the output the data is eagerly accessed to cache the function, causing the error:

Image

Random thoughts: maybe it's somehow partially related to my assert function, where compiler doesn't know what does it do? But it causes me to don't use optional chaining, but compiler doesn't know why I'm not using it and is not informed by the types 🤔 Also it's not strictly related to the useEffectEvent or anything like that, because if I remove it - it'll still cause the same problem

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

19.1.0-rc.3

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions