[Compiler Bug]: Computed Property Names in Object Initializers

[dkempner]

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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEA5gjgAowQAOCMOAngHICGAtggBQCURwAHWJEY5WMQDkaCBAlCAvkKEIAHjQgMiGbPkJEAwhHbrMCTDl78hRInEJgctwjlU4AaqwA2UBEQC8VsI2ANpklNR0DCwc3DwAushEEgBGrDBywoqY1iJiMMQAPIbmrkQAbl4+fsB2JSrulQjyAHwAgslwBQD0xS71zQog8kA

Repro steps

function getPropertyName() {
  return 'foo'
}

export function Component() {
  const contextValue = {
    [getPropertyName()]: 'bar'
  }

  return <Context value={contextValue}>Abc</Context>
}

How often does this bug happen?

Every time

What version of React are you using?

19.1.0

What version of React Compiler are you using?

19.1.0-rc.2

[dkempner]

Note that this works. Playground Link

function getPropertyName() {
  return 'foo'
}

function useContextValue() {
  return {
    [getPropertyName()]: 'bar'
  }
}

export function Component() {
  const contextValue = useContextValue()

  return <Context value={contextValue}>Abc</Context>
}

[dkempner]

I'll also note that the eslint-plugin-react-compiler compiler doesn't catch this.

[josephsavona]

Thanks for posting. This is a known todo, as indicated in the error message. The compiler will skip compilation of this code. Because it isn’t really actionable by a developer - the code is fine, we just don’t support this syntax yet - we chose not to include it in our eslint output.

[dkempner]

Thanks @josephsavona ! I'm just curious why this isn't caught by eslint? Is it because you intend to fix it in the compiler soon, or is it challenging to detect?

[josephsavona]

The ESLint plugin is powered by the compiler, but we choose not to report "todo" errors in the linter since the code itself is reasonable, and it's a temporary limitation of the compiler. Developers shouldn't rewrite these cases to satisfy the compiler, we just need to implement support for the syntax.

[nathanmarks]

@josephsavona what would the LOE be to have an option to surface todos? when we have silent compiler bailouts it can cause perf regressions if we aren't doing manual memoization for other parts.