skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

react-compiler

Configure the React Compiler in Rango apps via @vitejs/plugin-react's native compiler option.

Updated Nov 7, 2025
Search Tags:#vite#server components#memoization#react compiler#rango#oxc-transform-react#plugin-react
One-click install
npx skills add https://github.com/rangojs/rango --skill react-compiler-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-compiler
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/react-compiler
Command: npx skills add https://github.com/rangojs/rango --skill react-compiler-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vitejs/plugin-react, oxc-transform-react, @rangojs/router.

What problem does it solve? Enabling the React Compiler in a Rango app is confusing because @vitejs/plugin-react v6 removed its internal Babel path, the new native compiler option depends on a fast-moving optional peer (oxc-transform-react), and server components are silently never compiled. This Skill provides the exact install, wiring, verification, and troubleshooting steps. ## Core Features & Use Cases - One-flag setup: Wire react({ compiler: true }) into both default and Cloudflare Rango Vite configs with correct plugin ordering. - Client-only contract explained: Clarifies why SSR/RSC environments are not compiled and how to verify it with bundle markers like react.memo_cache_sentinel. - Troubleshooting table: Diagnoses unmet-peer/ERESOLVE errors, dead react({ babel }) configs, silent logDiagnostics, and React version targeting issues. - Use Case: A developer upgrades to @vitejs/plugin-react 6.1, hits an ERESOLVE on oxc-transform-react, and uses this Skill to pin the correct peer range and confirm the compiler ran in the production client bundle. ## Quick Start Enable the React Compiler in my Rango app's vite.config.ts and verify it actually compiled the client bundle.

Frequently Asked Questions about react-compiler

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable the React Compiler in a Vite React app?▼

Set `react({ compiler: true })` from @vitejs/plugin-react 6.1 or later and install the optional peer `oxc-transform-react`. No Babel plugin or extra runtime is needed on React 19, which ships `react/compiler-runtime` in-tree.

How to fix unmet peer oxc-transform-react or ERESOLVE errors?▼

Pin `oxc-transform-react` to the range declared in @vitejs/plugin-react's peerDependencies (`^0.145.0` for 6.1.x) rather than npm's latest. The binding releases frequently, so bump both packages together.

Does the React Compiler compile React Server Components?▼

No. @vitejs/plugin-react's native compiler option only runs in environments whose consumer is not `server`, so SSR and RSC components are never compiled. This is plugin-react's contract, not a Rango limitation.

Why does react({ babel: { plugins } }) not run the React Compiler?▼

@vitejs/plugin-react v6 removed its internal Babel pipeline, so the `babel` option is a dead path. Use `react({ compiler: true })` for the native compiler, or wire @rolldown/plugin-babel with `reactCompilerPreset()` as a fallback.

How do I verify the React Compiler actually ran on my build?▼

In dev, fetch a client module from Vite and grep for `compiler-runtime` and `_c(` imports. For production, grep the client bundle for `Symbol.for("react.memo_cache_sentinel")` comparisons, which have a zero baseline without the compiler.

Why does logDiagnostics print nothing with the React Compiler?▼

`oxc-transform-react` 0.148.0 dropped recoverable bail-out diagnostics, so `logDiagnostics: true` goes silent on newer bindings. Stay on 0.145.x with plugin-react 6.1.x to keep diagnostic output.

Related Skills

Explore More Software Engineering Skills→
tkgstratortkgstrator
1

tanstack-router

Generates file-based TanStack Router routes and typed parameters for Vite+React SPAs via the @tanstack/router-plugin.

Community
Intermediate
m-de-graaffm-de-graaff

react-performance

Diagnose and fix React and Next.js performance issues across waterfalls, bundles, and re-renders.

Community
Intermediate
malinskibeniaminmalinskibeniamin
3

setup-react-compiler

Configure rsbuild and Babel plugin integration for React Compiler workflows.

Community
Advanced
genesisczgenesiscz
7

genesis-tools:react-compiler-debug

Inspect React Compiler output to debug memoization and optimization issues.

Community
Intermediate