[Compiler Bug]: MobX observer component is compiled without an incompatible-library diagnostic and loses reactivity

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-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/BranZhang/react-compiler-mobx-repro

Repro steps

Summary

When babel-plugin-react-compiler is enabled with compilationMode: 'infer', a MobX observer component declared as a top-level function and then wrapped with observer(Component) can keep returning stale JSX after observable changes.

The failure is silent: no runtime error or compiler warning is shown. The UI keeps rendering the initial value after the MobX store changes.

Reproduction

Repository: https://github.com/BranZhang/react-compiler-mobx-repro

npm install
npm run dev

Open http://localhost:5199, then click store.increment() three times.

Actual Behavior

The rows using a top-level function declaration wrapped by observer(...) keep displaying 0:

• plain observer: 0
• observer + console.log: 0

The MobX store value does change, and other subscribers can observe the updated value.

Expected Behavior

The observed component should continue to update when COUNTER_STORE.count changes, or React Compiler should skip this pattern / warn that it is unsafe.

Control Cases

The same reproduction includes several control cases:

• observer + window write updates to 3, because the render-time global assignment makes React Compiler bail out.
• observer + 'use no memo' updates to 3, because the component is skipped by React Compiler.
• reaction + useState updates to 3, because it uses an explicit MobX subscription instead of render-time observer tracking.
• Commenting out babel-plugin-react-compiler in vite.config.ts makes all rows update correctly.
• Changing const Plain = observer(PlainComponent) to an inline function expression passed to observer(...) also makes the row update correctly.

Suspected Mechanism

observer relies on executing the component function during render inside a MobX tracking context. Observable reads that actually happen during render become the component subscription.

The compiled output shows that COUNTER_STORE.count is still read on every render, so MobX continues tracking the observable and notifying the component. However, React Compiler caches the JSX created during the initial render without treating the observable value as a dependency. After a store update:

1. MobX triggers a re-render.
2. The component reads the latest COUNTER_STORE.count, so the MobX subscription remains active.
3. The compiled memo cache returns the JSX created during the initial render.
4. The component therefore keeps displaying the initial value even though it continues to re-render with updated observable values.

Versions

• react: 19.2.0
• react-dom: 19.2.0
• mobx: 6.13.3
• mobx-react: 9.2.2
• mobx-react-lite: 4.1.1
• babel-plugin-react-compiler: 1.0.0
• vite: 5.4

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?

babel-plugin-react-compiler@1.0.0

Start with the linked reproduction by running npm install and npm run dev, then inspect vite.config.ts and the compiled output for the top-level function passed to observer(...). Compare the listed control cases and verify that the observed component updates after three store increments, or that the compiler emits a diagnostic or skips the unsafe pattern.