React Compiler generates erroneous code when an app contains a component named `Symbol`
オープン
まだ誰も着手していません。
Status: Unconfirmed
Type: Bug
- 主要言語
- JavaScript
- スター
- 251k
- フォーク
- 51.4k
- 平均マージ
- 2日 4時間
- マージ済み PR(30日)
- 53
説明
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
Repro steps
- Configure a React app to run React Compiler.
- Create a component named
Symbol. - 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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
リンクされている React Playground の再現例から始め、Symbol という名前のコンポーネントに対して React Compiler が生成した JavaScript を調べてください。ランタイムエラーを確認し、続いて Symbol.for 呼び出しを出力するコンパイラーのエントリーポイントを追跡してください。同じ再現例が "Symbol.for is not a function" エラーなしで実行されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react
- 領域
- compilers, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100