[Compiler Bug]: Compiler tries to assign to variables that does not exist

[SimenB]

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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCASgmGgF4IDyARmTAG4IwEC+BAZjBAwEAOiAACMBAEM4eALRSYaKQHooeNABswogNzCAdphz4iBAAoQc7GAGEIBvAgAeeADQky9xy7zmBWGDcfAJCopIy8orKcnCCOAYIjjog+gaGLiaEcQZghJbWHAQAvAQAFIYEZnAAFloAJpIGHlJGGFIaDgAisB1oDh4A7mj1eDUlIiB4SgDmMxyUvKIeAHRrWAFBXG6VBJK8OwYAlCUAfES7ANobVmAe+wC6E6QI3k6u-rdlN4H3CAcWKwQGxvXxHNJVHJ5MzTNBzBb-YKlH5gNK7F6Uah0JgsGxlYj7ZAEWHwmCLDwOTG0BDccGGXaSPCwAwEAxQTSaNJcNIgLhAA

Repro steps

t2 is not defined, so there's a runtime JS error (ReferenceError: assignment to undeclared variable t2).

Screenshot of buggy output for reference when bug is fixed in compiler:

---

Note that removing width = "triggerRef" or const { triggerRef } = props; makes the bug disappear.

How often does this bug happen?

Every time

What version of React are you using?

N/A

What version of React Compiler are you using?

RC

[josephsavona]

Thanks for reporting, this is a legit bug. At a glance, we're not correctly handling reassignment of function parameters. That's pretty sketchy in JS but it should obviously still work.

As a workaround, I would avoid reassigning props:

export const Popover = (
  { children, animationDuration, width = "triggerRef", ...props },
  ref,
) => {
  // _contextRef is unused?
  const [contextProps, _contextRef] = useContextProps(props, ref, PopoverContext);
  const { triggerRef } = contextProps;

  useResizeObserver({ ref: triggerRef, onResize });

  return null;
};

[SimenB]

Yep, that's similar to the workaround we went for, thanks!

FWIW, the pattern is something we "inherited" since we based the components the React Spectrum ones: https://github.com/adobe/react-spectrum/blob/027f96ad3c0358ec1d913e1b91849321f5f91d9a/packages/react-aria-components/src/Link.tsx#L60