reactjs / reactjs/react.dev

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

Open
#8,215 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: typos
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React Compiler installation page and the linked react-vite-compiler-repro repository. Inspect the custom Vite Babel plugin setup and its babelConfig, then verify whether sourceMaps: true resolves the reported sourcemap difference before updating the installation instructions if confirmed.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, react, vite
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.