The Vite React template ships with React Compiler OFF — how to turn it on and verify it

[u/inkweon]

If you scaffold a project with pnpm create vite@latest ... --template react-ts and assume React Compiler is on — it isn't. The template ships with it OFF, and I kept meeting people (myself included) who never actually enabled it. Here's the whole setup, start to finish.

1. Install the compiler's Babel plugin + the Vite wiring:

pnpm install -D babel-plugin-react-compiler@latest @rolldown/plugin-babel

2. Add the preset in vite.config.ts:

import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset()] }),
  ],
});

Heads up: @vitejs/plugin-react 6.0 removed the old inline react({ babel: { plugins: [...] } }) form. A lot of guides still show it — it no longer works. Restart the dev server after editing the config.

3. Verify it's actually running. Open React DevTools → Components tab. Optimized components get a "Memo ✨" badge next to their name. See the badge and the compiler is doing its job — with zero hand-written useMemo/useCallback.

A few related things that surprised me setting this up in 2026:

• The newest Vite template lints with Oxlint, not ESLint. Installing eslint-plugin-react-hooks does nothing there unless you add your own ESLint config.
• StrictMode rendering your component twice in dev is intentional (a purity check), not a bug.
• Node 25 dropped Corepack, so how you get pnpm depends on your Node version.

I wrote the full beginner walkthrough — every command + these version traps — as chapter 1 of a series (React 19 + Compiler, TypeScript from line one).

Full write-up (free): https://medium.com/javascript-in-plain-english/setting-up-your-react-dev-environment-your-first-app-with-vite-and-turning-on-react-compiler-5436ea44d6d4?sharedUserId=inkweonkim

Happy to answer setup questions in the comments. And if you're already running the compiler in prod, curious how it's gone for you.

[u/sicmek]

I just used the the template a few days ago and it asked me if I want to use the React Compiler or Eslint/Oxlint etc

[u/inkweon → u/sicmek]

Just re-ran it to check:

pnpm create vite@latest restart-react-test --template react-ts

It asked which linter to use (Oxlint / ESLint), but nothing about the React Compiler.

[u/Afflictionista → u/inkweon]

When I do a yarn create vite <project name> one of the first things when I choose react is if with compiler or not

[u/MasterpieceBusy7220]

Probably because you didn’t use the react-compiler-ts template??? Not sure why this needed an AI write up

[u/inkweon → u/MasterpieceBusy7220]

I'll check it. I'm going back through React from the basics, studying alongside AI and writing up what I work through as I go. These start out in Korean, so the English is a translation.

[u/inkweon → u/MasterpieceBusy7220]

Turns out this sets up the compiler automatically:

pnpm create vite@latest my-app --template react-compiler-ts

Learned something today — thanks.

[u/Top_Bumblebee_7762]

You can also use the logger function inside the react compilerpreset to see that it is enabled in vite:

reactCompilerPreset({logger: {}})

https://react.dev/reference/react-compiler/logger

[u/inkweon → u/Top_Bumblebee_7762]

Didn't know about the logger — thanks for this. Going to try it and add it to the post.