[Compiler Bug]: TypeScript function overloads cause an exported function from a hook to be `undefined`

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/#N4Igzg9grgTgxgUxALhAHQHYEsC2AHCGAFwAJgSowEBJDIgGxIF8SAzGCHEtEAPwHosdejwDcmTP34kAKgE88CMHBhY8pAO5YiACzZQMcIlggYSEAG4IY9CAEMAJkIDmmBAA8CxfYeOmKVDIwdhhg9HZECA4ASkrQ8AgA8lY29g4APEEhYREmoSQekRgOYCSxcIQZYESqGM4ANCQAskpgds4IACJKKmpEhAB8AwAUmCQkNdnhfqHIssGh03lg9ZgAlGRjJBWhpOSshDgRLWBtHcwkALwBNMLDa+IYW6wGRnlshxEAanb0UAjDADWCDkc2BcggrHmU1ypjAazm1Vqzke4xevneBxgRyIPz+APBYJBkOhi1h+QAPiQMFB6IwqQYHAhWEIogiSEiXCQqTS6aifG9-FicXj-kCQUSIVCsmSZqUebT6RRiszWQ4NsAtuMsFDhgBCcEbGAIIiwMy8+j87W6vWTWXLADa4IAukaTWaSODHlqSMbTTAzMLjq12gC7Tk5U6Qa7+UwJGZtnDSBB1MsriREgAjABWCCMADoEHRVEphuGlnC1vmjnh0olU6YZCNhlG5I0cCGOq6rgMSMNNQnxhZfv9JatByRwpmEPQ5kGiCczgCO6dQ2tx+MmGsHvHxn6PftPriRwhGim5cxHnGnhgpLIFD1VOoSFpdNBSOjBWZLNZbI4XG4niEB+rwzDcMoRlEsSQLAiAAHIQMkv5pJkCwRmmhRFiUZR5pU6ScnUjSLqG3TKE+-QwEMowJuW5JgHMEEVqE44alsOzVGQHzYsGq7nCw1yULcDD3N6CafmB86igSEqesS0poUx8rUoq3LKkyLIYGymwTjqfYGiCbr+uaipWiQun6rRkYuoZHperu4y+u6AZcTixEdGWCl0a2MZbNebFJuYDb5NcWa5gWRY1FgpaWcsVY1iQ6QZkFMgkL2wwtuC7adgg3aXGlA4OSQw74mOPpTjOc5Hm5y7ZeuvnbqJe5OWYh7cce+JnkFpRMFemAgPUIA7CyzgoCAIBMEAA

Repro steps

This only occurs when using babel-plugin-react-compiler version 19.1.0-rc.3, when using version 19.1.0-rc.2 it works.

When you define a function inside a component that has some TS function overloads when you export that function it is undefined in the compiled code. i.e.

// Hook
export function useTranslatedResourceOverload<Translations extends Record<string, MessageDescriptor>>(
  translations: Translations,
) {
  const { formatMessage } = useIntl();

  function formatValue(key: keyof Translations): string;
  function formatValue(key: keyof Translations | null | undefined): string | null;
  function formatValue(key: keyof Translations | null | undefined) {
    if (!key) return null;
    if (!translations[key]) return key;

    return formatMessage(translations[key]);
  }

  return { formatValue };
}

// Usage
const { formatValue } = useTranslatedResource(premiumTranslations)

// `formatValue` is now `undefined` here, so it cannot be called.
const premium = formatValue('none')

If you check the playground, the difference is that without the overloads, formatValue is assigned to t0, while with the function overloads, it never gets assigned to a tX variable.

I hope the info provided is enough.

How often does this bug happen?

Every time

What version of React are you using?

19.1.1

What version of React Compiler are you using?

19.1.0-rc.3

Inizia con il playground React Compiler collegato e confronta babel-plugin-react-compiler 19.1.0-rc.2 con 19.1.0-rc.3 per l’esempio dell’hook sovraccarico. Ispeziona l’output compilato intorno alla funzione sovraccarica e verifica che la funzione esportata sia assegnata e chiamabile, anziché essere undefined.