reactjs / reactjs/react.dev

[Typo]: React Compiler Vite installation docs with "vite-plugin-babel" cause sourcemap issues

Offen
#8,215 0 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

type: typos
Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

Summary

When following the setup instructions for React Compiler on the current live docs site, if using a custom Vite Babel plugin + React SWC or React Router v7 framework mode, you will notice that if a component gets optimized by React Compiler, the sourcemaps appear to have some React Compiler-optimized code paths in them, making dev debugging more difficult.

Page

https://react.dev/learn/react-compiler/installation

Details

Please see reproduction repository for specific details: https://github.com/andrew-locklair-fs/react-vite-compiler-repro

Screenshot demonstrating sourcemaps appropriately added with default config:

Image

Screenshot demonstrating sourcemaps not added when using the custom vite-plugin-babel:

Image

Happy to dig into this more, but hoping that it's as simple as just turning the relevant sourcemaps option ON for the custom Vite Babel plugin. I ran into this converting a RRv7 framework mode repo to add React Compiler, and the instructions seem to leave out sourceMaps: true in babelConfig.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der React Compiler-Installationsseite und dem verlinkten Repository react-vite-compiler-repro. Untersuche die Einrichtung des benutzerdefinierten Vite-Babel-Plugins und dessen babelConfig. Überprüfe dann, ob sourceMaps: true den gemeldeten Sourcemap-Unterschied behebt, bevor du bei Bestätigung die Installationsanweisungen aktualisierst.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
babel, javascript, react, vite
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.