React Compiler generates erroneous code when an app contains a component named `Symbol`

[devuxer]

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/#N4Igzg9grgTgxgUxALhAejQAgMIwQQwBcFN9M4IBbABwgDsE7DM79KEATTAZQE9KARhAA2AHToAzKHTiEAlvR78hwgBQBKTMHGZMeQrDqYAPBzkA3AHwBJUpVJLBI8lVoMmxtGasBucQF9xcQxMAFUwEjlmOSMAQWpqcQQAD1oYZg4ECXwoYWYpGXlFeOoNLR09BAMYI1UK3VMLS3rdEwALAEZLACUCWRxXOWEEGEwAISgAc0xe6hgIDihZBTpPTuajVoa+J2FMNA2tz29DzHU-On8QABoQCkk5SZQQORoIdMxCXmoSYEwABWEUxiAHlqEU6GBMP5MBJ5vYAOQCfACBDCAC01CBkxi6Lw+Fk6IoNCGIy8cjAhARF3Eqm0mwwxOoQyIKwAsgsEMhMKIQPhhGIQAFMGBWWAJHIEFDAcC6GCIWBzjdwG0IAB3axMEasYRgFDZXUIfxAA

Repro steps

1. Configure a React app to run React Compiler.
2. Create a component named Symbol.
3. Run the app.

The issue relates to the fact that React Compiler generates output with a call to Symbol.for. As shown in the playground link, if a component is in scope with the name Symbol, the compiler-generated code tries to call the for method on the React component rather than globalThis.Symbol. This results in the runtime error "Symbol.for is not a function".

How often does this bug happen?

Every time

What version of React are you using?

19.2.3

What version of React Compiler are you using?

1.0.0

[mallorysmith64]

I'm trying to work on it.

[Mudavath-Giri-Naik]

Hi @devuxer, I noticed that Symbol shadowing causes issues in react-compiler-runtime/src/index.ts. Using globalThis.Symbol.for(...) instead of Symbol.for(...) should resolve this.
I'm happy to prepare a PR that includes the fix and a regression test if this approach looks good to you.

[mallorysmith64]

In React, you cannot name a file Symbol.js or Symbol.tsx because Symbol is a built-in global object used to create unique identifiers. I tried working on it, but I think it's best to rename your function to something other than Symbol.

[devuxer]

Hi @devuxer, I noticed that Symbol shadowing causes issues in react-compiler-runtime/src/index.ts. Using globalThis.Symbol.for(...) instead of Symbol.for(...) should resolve this. I'm happy to prepare a PR that includes the fix and a regression test if this approach looks good to you.

Hi @Mudavath-Giri-Naik, For some reason GitHub marked your reply as spam, not sure why. Anyway, yes, I think the solution would be something like prefixing all function calls on Symbol with globalThis (or setting Symbol to a variable like ___Symbol or something virtually guaranteed to not be shadowed).

[devuxer]

In React, you cannot name a file Symbol.js or Symbol.tsx because Symbol is a built-in global object used to create unique identifiers. I tried working on it, but I think it's best to rename your function to something other than Symbol.

@mallorysmith64 , Could you point to some documentation stating that Symbol is not allowed as a file or component name in React? I have not found this to be the case. The whole reason I encountered this problem was that I had a component named Symbol in a file named Symbol.tsx. Only after plugging in React Compiler did I encounter a problem, and there was nothing in the console to help me understand what the problem was. It took a fair amount of debugging and asking lots of questions to an LLM to figure out the problem. So, I'm pretty convinced this is a rough edge of React Compiler that should be smoothed.

Anyway, I have not delved into the codebase, so maybe I'm missing something, but I don't believe it should be difficult to solve this problem with a prefix or variable, as discussed in my previous comment and @Mudavath-Giri-Naik 's comment.