[Compiler Bug]: Can't handle Dynamic JavaScript Object Keys

[Y-Hui]

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/#N4Igzg9grgTgxgUxALhAgdlAtgAgMoAuAhgVGDsADro75RyJhgBmUANgDTW0Cq6Y9Ri3ZcaOAEoIAVgjgEAlgDcEogL7VqCAB4AHCDAI5W6OfIg1CJMgBUiAcwAUOmBB1gAlBW4445sIeAcfytyVRwAXhxnVzANMV9+QwSCDENIqjFaAG1LUjAAOjxBBCZWNgBdZBwAHgBhCCw9dFSAQRwAegA+UVps3LJ8vgEGEuEKqrqGptSAIQ7u7z7iPPzJGVNlSpr6xvNU2vmenHV0bwT-HGI7QgBPNhKIr0ycHOWBopHS9i2AcgAjOwAWjsMAQGEBAEYAAxQnB-fQAEwQMDhiORwNB4IArDDLtoCBiwehAQB2GE-I5LEKDfjFL7jHD-IGghF4rQEgDuAAt5CkKYsXv0CmtZApNlUmYD9ER0HYEGzOTy+UcTt5QaQYDQHALqgilD42EQmAA5IhYBDhYBwNhgLQOH5XCmXey3e5gLLBPLldyqToC2hW8wpdAED1vMDlE69GrtPWKP1idzUVXoYymcw4HbTEMtByeDK0dWwGiUEAIiAldAOnBYEgpGClgDcyeoaYUGazexDMzzT0LCA1JbLFbAVcMtYI9abLdTUBM7ZoneaIdqvYLOCLmpwpfLlerE6nIGb6BOIFUQA

Repro steps

enum Status {
  Successful,
  Unsuccessful,
  Rejective,
}

const content = {
  [Status.Successful]: <ComponentA />,
  [Status.Unsuccessful]: <ComponentB />,
  [Status.Rejective]: <ComponentC />,
}

When writing the above code within the component, it fails to compile.
It gets an error like this

Todo: (BuildHIR::lowerExpression) Expected Identifier, got MemberExpression key in ObjectExpression (11:11)

How often does this bug happen?

Every time

What version of React are you using?

19

[Y-Hui]

It's worth noting that it won't compile in playground, but will skip compilation in the local project, which doesn't have any configuration items set for babel-plugin-react-compiler.

[josephsavona]

Thanks for posting! React Compiler supports a broad range of JavaScript (and TypeScript/Flow) syntax, but there are some syntax forms we don't yet support. Computed object expression keys is on the list of todos. We allowlist the syntax we intend to support and skip compiling functions that use unsupported syntax. The playground shows all errors, but as @Y-Hui noted if you use a function like this locally we'll just skip it without error (w default configuration, which is strongly recommended).

I'm going to close since this is a known todo and not a bug. Thanks again for posting!

[Y-Hui]

Got it - thanks!