[Compiler Bug]: can't use $ as component name in Client Components

Why this is a good first issue

The issue involves reserved variable handling in React Compiler.

AI Summary

The issue arises because the React Compiler treats '$' as a reserved variable in Client Components, conflicting with a user-defined component. Either the compiler needs to handle this case by renaming the variable or documentation should clarify this limitation. The scope involves understanding compiler internals and reserved variable handling.

Issue Description

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-hooks (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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAJABTBwAWeANgCYwKYC+AlEcADrFFM6xiAHnp4AbgD5KNBk1ZCA9KMk8WPHggAeABwgwcRegjQBDKLQMZs+QkQCyATwCC27WQ7de-QUSEkJQlQAjBIAEgi0tBBEAOp6DACEisEBCv6qPCAANCBwhGh4AOYoIHgAtrr6RDgO2gicRAAKtFCFeJgA8to2mGBELERoMBBlRADkAEYmExEAtNotbZizTCa4s3kVdAgwSnhgOGMA3OqYFDxERAoKm9p0Jj12EEbIRFwgJpHvqkRgD-sFBB9ZqtdpdHpgNhHbLgKgQADuAElMDgdphPmAUKZaGAECwgA

Repro steps

In my codebase, I have a utility component called <$> that I use as a succinct shortcut for inline styles.

// this
<$ fs="10em" x="30%" y="10%">
  <h1>Hello World!</h1>
</$>

// is equivalent to this
<h1 style={{fontSize: "10em", left: "30%", position: "absolute", top: "10%"}}>Hello World!</h1>

This works in Server Components, but breaks in Client Components. It seems that React Compiler uses $ and _c as reserved variables, which overwrite my component. So either

the Compiler should detect when $ in the scope and choose a different variable name, or
the docs should include a warning about this (apologies if they already do, I couldn't find any)

How often does this bug happen?

Every time

What version of React are you using?

19.2.4

What version of React Compiler are you using?

1.0.0

GitHub Labels

Type: BugStatus: Unconfirmed