[Compiler Bug]: `TSInstantiationExpression` as default value in parameter list

[SimpleCreations]

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/#N4Igzg9grgTgxgUxALhHCA7MAXABAEwQDMBDKAG2wCUENCYB5AB2wEtNcBeXAHgBVcCAB7Za+MLgDSCAJ4A+ABQAdDLlxMYEJmGS4AwhAC2TTLWwAFTdp7YZTBBCK4AygnII42Zm0z85cgBoVAEouOV5Xd09vdlUAa1lOYA0tMAA6ADcScigEAF9cYDTilO0CgHo5AG4VFWETGDx0LDxIjzxufkERMQlpeQVgFTUtHywg1VwYMQRGFliuAmIySho6WZjfPkDh3CychAmRjD0ACxIMAHNDlTzdIcnR2J1cTYw-AG0AXRrJ6fW5mMAPy6BSlF4GYymDAWKxgGx2BxONrReZbfyhTjhGgkTwAUXchjMvzU+1yINwfBJuEwZwu11BZIQuj4mPCGQgrHwvzybMKuygYAQeKIRHaCgUfIeajUzUg7jS5AglwU-3ob2C1LyAVwHzVGzRGC+wVqfwQ2FgqgwFHIPN+IDyQA

Repro steps

Use a TSInstantiationExpression as default value in parameter list.

Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `TSInstantiationExpression` cannot be safely reordered

How often does this bug happen?

Every time

What version of React are you using?

React Compiler Playground

What version of React Compiler are you using?

React Compiler Playground

[josephsavona]

Thanks for posting, this a known todo.

[Om15102003]

I’d like to work on this issue because it directly impacts developer experience when writing generic React components with TypeScript. Fixing it would make the code more robust and prevent other contributors from hitting the same confusing error.

The compiler wasn’t able to safely reorder that TSInstantiationExpression (defaultRenderOption) inside the parameter destructuring, which broke the build.
So Instead of setting the default directly in the parameter list, I moved the defaulting logic into the function body. That way, the parameter itself stays a plain value, and the compiler no longer needs to reorder the instantiation expression.

type RenderOption<T extends Key> =
  (props: ComponentProps<typeof SelectOption<T>>) => ReactElement;

const defaultRenderOption: <T extends Key>(
  props: ComponentProps<typeof SelectOption<T>>
) => ReactElement = (props: any) => (
  <SelectOption key={props.value} {...props} />
);

export const Select = <T extends Key>({
  options,
  renderOption,
  value,
  onChange,
}: {
  options: Option<T>[];
  renderOption?: RenderOption<T>;
  value?: T;
  onChange: (value: T) => void;
}) => {
  // avoid TSInstantiationExpression in parameter default
  const ro = (renderOption ?? (defaultRenderOption as RenderOption<T>));

  useEffect(() => {
    console.log(ro);
  }, [ro]);

  return null;
};

[josephsavona]

You're welcome to submit a fix. We'd need a repro test, added in compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/<fixture-name>.js, and then the fix should be one line, add 'TSInstantiationExpression` to https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts#L3081-L3083

[zekariasasaminew]

@Om15102003 are you working on this, or should I create a PR? I have the fix and repro test locally.

[zekariasasaminew]

#34488

@josephsavona @Om15102003