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

[ysulyma]

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

1. the Compiler should detect when $ in the scope and choose a different variable name, or
2. 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

[lotfimaria331-ops]

“Thanks for the detailed repro! It looks like $ is treated as a reserved variable in Client Components. Either the compiler could rename it automatically or a doc note would help clarify this limitation.” Le dim. 29 mar. 2026, 18:50, Yuri Sulyma ***@***.***> a écrit :

…

*ysulyma* created an issue (facebook/react#36167) <#36167> 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 1. the Compiler should detect when $ in the scope and choose a different variable name, or 2. the docs should include a warning about this (apologies if they already do, I couldn't find any) image.png (view on web) <https://github.com/user-attachments/assets/b7c3230f-7be3-4500-95a4-81316534b924> 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 — Reply to this email directly, view it on GitHub <#36167?email_source=notifications&email_token=B7VCPZSOAHGS3STMJYCQY2L4THAETA5CNFSL4Z3JMQ5C6L3HNF2C22DVMIXUS43TOVSS6NBRGY3DCMBTGE4TJJTSMVQXG33OVJZXKYTTMNZGSYTFMSSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7VCPZQILCX6RWID5HR4NVT4THAETAVCNFSM6AAAAACXFKVF5SVHI2DSMVQWIX3LMV43ASLTON2WKOZUGE3DMMJQGMYTSNA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[finessor06]

Hey mate — if you’re still stuck, I can help you debug this.
Just head over to my debugging-service repo and open an Issue.
All the steps are in the README, so you’ll know exactly what to include.
Thank you.

[mvitousek]

I don't think this is actually an issue, and I'm guessing that your code is failing on client components for a different reason. Specifically, $ isn't recognized as a React component name because it doesn't start with a capital letter. Having a local variable named $ doesn't overwrite $ as a component in the same way that having a local named div doesn't overwrite < div>{}</ div>.

[lotfimaria331-ops]

Thanks for the clarification—that makes sense. Le mer. 8 avr. 2026, 13:51, Michael Vitousek ***@***.***> a écrit :

…

*mvitousek* left a comment (facebook/react#36167) <#36167 (comment)> I don't think this is actually an issue, and I'm guessing that your code is failing on client components for a different reason. Specifically, $ isn't recognized as a React component name because it doesn't start with a capital letter. Having a local variable named $ doesn't overwrite $ as a component in the same way that having a local named div doesn't overwrite < div>{}</ div>. — Reply to this email directly, view it on GitHub <#36167 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7VCPZVIDZDGG42JIDWSB234U2NS5AVCNFSM6AAAAACXFKVF5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DEMBYG43DAOBTG4> . You are receiving this because you commented.Message ID: ***@***.***>

[jeessmokat-hue]

Thanks for the clarification regarding the component naming conventions. That makes sense why the compiler is behaving this way. Since the issue has been closed, I will look into alternative naming for my utility component.

…

On Fri, Apr 10, 2026, 1:54 PM lotfimaria331-ops ***@***.***> wrote: *lotfimaria331-ops* left a comment (facebook/react#36167) <#36167 (comment)> Thanks for the clarification—that makes sense. Le mer. 8 avr. 2026, 13:51, Michael Vitousek ***@***.***> a écrit : > *mvitousek* left a comment (facebook/react#36167) > <#36167 (comment)> > > I don't think this is actually an issue, and I'm guessing that your code > is failing on client components for a different reason. Specifically, $ > isn't recognized as a React component name because it doesn't start with a > capital letter. Having a local variable named $ doesn't overwrite $ as a > component in the same way that having a local named div doesn't overwrite > < div>{}</ div>. > > — > Reply to this email directly, view it on GitHub > <#36167 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/B7VCPZVIDZDGG42JIDWSB234U2NS5AVCNFSM6AAAAACXFKVF5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DEMBYG43DAOBTG4> > . > You are receiving this because you commented.Message ID: > ***@***.***> > — Reply to this email directly, view it on GitHub <#36167 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7VJNKAZEDIM5FW7J7G7Y4T4VDOGHAVCNFSM6AAAAACXFKVF5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DEMRTGU2TONJSHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>