---
title: "@vitejs/plugin-react とは？v6.1の導入とvite.config設定・React Compiler・SWC版との違い"
url: "https://www.issoh.co.jp/tech/details/2680/"
published: 2024-06-20
updated: 2026-10-26
categories: ["React"]
publisher: "株式会社一創"
---

# @vitejs/plugin-react とは？v6.1の導入とvite.config設定・React Compiler・SWC版との違い

**@vitejs/plugin-react** は、ViteでReactを動かすための公式プラグインです。開発サーバーのFast Refresh（状態を保ったままの画面更新）と、React向けのJSXの設定を受け持ち、`npm create vite` のReactテンプレートにも最初から入っています。2026年10月時点の最新は **6.1.2**。v6はVite 8が必須で、内部からBabelが外れました。この記事では、導入と `vite.config.ts` の書き方、v5から上げるときに詰まる箇所、6.1.0で入ったネイティブのReact Compiler、SWC版との使い分けを、手元で実際にビルドした結果つきで整理します。

## まとめ：@vitejs/plugin-react の要点

- 導入は `npm install -D @vitejs/plugin-react` と、`vite.config.ts` の `plugins: [react()]` の2点で終わる。オプションなしで大半の用途に足りる。
- 最新は6.1.2（2026-10-05）。v6はVite 8専用で、Vite 7のまま入れようとするとnpmがERESOLVEで止まる。Vite 7に留めるならv5.2.0を使う。
- v6では `react({ babel: {...} })` が廃止された。**指定してもビルドはエラーなく通り、Babelプラグインが黙って効かなくなる**ので、`@rolldown/plugin-babel` へ移す。
- React Compilerは、6.1.0からの `react({ compiler: true })`（Rust版・実験的）と、`reactCompilerPreset()` のBabel版の2通り。500コンポーネントの実測でRust版0.5秒、Babel版6.8秒で、出力は同一だった。
- 新規なら標準の `@vitejs/plugin-react` を選ぶ。SWC版はSWCプラグインを使う構成のためのもので、create-vite 9からはSWC版のテンプレートが消えている。

## @vitejs/plugin-react がViteで担う処理（Fast RefreshとJSX）

Viteは `.ts` や `.tsx` を自前で変換できますが、Reactのコンポーネントを編集したときに状態を残したまま差し替えるFast Refreshは、Vite本体にはありません。[公式README](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)が挙げる役割は、Fast Refreshの有効化（React 16.9以上）、自動JSXランタイムの使用、インストールサイズの小ささの3つです。

開発サーバーを起動してコンポーネントの配信内容を見ると、プラグインが差し込んだ `var _s = $RefreshSig$();` が入っています。これがFast Refreshの仕掛けです。プラグインを外した設定で同じファイルを配信させると、JSXはVite本体が変換するものの、`$RefreshSig$` もHMRの登録も入らず、編集のたびにページ全体の再読み込みになります。v6ではこの変換をVite 8に内蔵された[Rust製ツールチェーンのOxc](/tech/details/9737/)が担います。[Viteの公式プラグイン一覧](https://vite.dev/plugins/)も、plugin-reactを「Oxc TransformerでReact Fast Refreshを提供する」と説明しています。

Babelが外れた効果はインストールサイズに出ます。Vite 8.3.5を入れたプロジェクトに追加すると、5.2.0は49パッケージ・約17.3MB（うち `@babel` 配下が19個）、6.1.2は2パッケージ・約244KBでした。React Server Componentsを扱う場合は、これとは別の `@vitejs/plugin-rsc` を使います。

## @vitejs/plugin-react のインストールとvite.config.ts設定

### 既存ViteプロジェクトへのReactプラグイン追加

開発依存として入れ、`plugins` 配列に `react()` を足します。`npm create vite@latest` で作ったプロジェクトなら、この状態がすでに出来上がっています。

```
npm install -D @vitejs/plugin-react
# pnpm の場合
pnpm add -D @vitejs/plugin-react
```

```
// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
})
```

v6.1.2の動作条件は、Vite 8系、Node.js 20系の20.19.0以降または22.12.0以降です（npmの `engines` は `^20.19.0 || >=22.12.0`）。plugin-react単体のNode.js要件はv5から変わっていません。ただし、後述のBabel構成で使う `@rolldown/plugin-babel` 0.2.4はNode.js 22.12.0以降を要求するため、Node.js 20系では同じ構成の動作要件を満たしません。

### create-viteによるReactプロジェクトの新規作成

ゼロから作るならテンプレートを使います。create-vite 9.3.1で選べるReact系は `react-ts`・`react`・`react-compiler-ts`・`react-compiler` の4つです。

```
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
```

注意したいのが、以前の記事でよく見る `--template react-swc-ts` です。SWC版のテンプレートは[create-vite 9.0.0（2026-03-12）で削除](https://github.com/vitejs/vite/blob/main/packages/create-vite/CHANGELOG.md)されました。いまこの名前を渡すと、エラーも警告も出ずに素のTypeScriptプロジェクト（`src/main.ts` と `counter.ts`）が作られます。Reactが入っていないことに後から気づくことになるので、テンプレート名は上の4つから選びます。

react-tsで作ると、package.jsonは `@vitejs/plugin-react` ^6.1.2、`vite` ^8.3.4、`react` ^19.3.1、`typescript` \~6.0.3 で、リンターはESLintではなくOxlintが入ります（create-vite 9.1.0から。`--eslint` でESLintに戻せる）。プロジェクト構成やTypeScript 7との組み合わせは[Vite + Reactの環境構築手順](/tech/details/3587/)で扱っています。

### plugin-reactの主要オプションと既定値

変換対象・JSX・Fast Refreshを調整する主要な5項目は次のとおりです。

| オプション              | 既定値               | 使う場面                     |
| ------------------ | ----------------- | ------------------------ |
| `include`          | .js .jsx .ts .tsx | .mdx にもFast Refreshを効かせる |
| `exclude`          | /node\_modules/   | Workerや非Reactの .tsx を外す  |
| `jsxImportSource`  | tsconfigの値        | Emotionなどを使う             |
| `jsxRuntime`       | automatic         | 旧来のclassicに戻す            |
| `reactRefreshHost` | なし                | Module FederationでHMRを共有 |

このほか6.1.0から `compiler` が加わりました（後述）。READMEは、Fast Refreshを正しく動かすにはファイルからReactコンポーネントだけをexportするよう求めています。定数を一緒にexportするファイルは、値が変わるたびにモジュールごと再読み込みになります。

## @vitejs/plugin-react の最新バージョンと対応するVite

メジャー版ごとに対応するViteが違うため、プラグインだけを上げると壊れることがあります。peerDependenciesをnpmレジストリから引いた結果は次のとおりです。

| 系列  | 最終版（公開日）          | 対応Vite | 変換    |
| --- | ----------------- | ------ | ----- |
| 6.x | 6.1.2（2026-10-05） | 8      | Oxc   |
| 5.x | 5.2.0（2026-03-12） | 4.2〜8  | Babel |
| 4.x | 4.7.0（2025-07-18） | 4.2〜7  | Babel |

5.xでVite 8に対応したのは最終版の5.2.0だけで、5.1.4までの対応は4.2〜7です。v6の公開後に入った主な変更は[CHANGELOG](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/CHANGELOG.md)にあり、6.0.4で `NODE_ENV=production` のまま `vite dev` を動かしたときの `$RefreshSig$ is not defined` を修正、6.1.0でネイティブのReact Compilerを追加、6.1.2で複合コンポーネント（`export const Accordion = { Root, Item }` の形）のHMRを修正しています。GSCでは「4.3.4」のような古い版番号での検索もありますが、4.3.4は2024年11月にVite 6対応を足した版で、いまから選ぶ理由はありません。最新値は[npmのパッケージページ](https://www.npmjs.com/package/@vitejs/plugin-react)か `npm view @vitejs/plugin-react version` で確認できます。

## v5からv6へ上げるときに壊れる箇所（Vite 8移行）

### plugin-react v6とVite 7の依存関係の不一致

v6のpeerDependenciesは `vite: ^8.0.0` だけです。Vite 7.3.7のプロジェクトで `npm install -D @vitejs/plugin-react@6` を実行すると、`ERESOLVE unable to resolve dependency tree` で止まりました。Vite 8へ上げられない事情があるなら、`@vitejs/plugin-react@5` を指定すれば5.2.0が入ります。Vite 8そのものの変更点（Rolldownへの一本化など）は[Vite 8.3の変更点](/tech/details/3587/)を参照してください。

### react({ babel })の廃止と設定の無視

v6で最も見落としやすいのがこれです。v5まで書けた `react({ babel: { plugins: [...] } })` を残したままv6にすると、`vite build` はエラーも警告も出さずに成功し、指定したBabelプラグインだけが効かなくなります。試しにbabel-plugin-react-compilerを未インストールのまま指定してもビルドは通ったので、設定そのものが読まれていません。

気づける場所は型チェックです。create-viteのテンプレートは `npm run build` が `tsc -b && vite build` なので、`vite.config.ts` に `TS2353: Object literal may only specify known properties, and 'babel' does not exist in type 'Options'` が出て止まります。`vite build` を直接呼ぶCIや、設定ファイルが `.js` のプロジェクトでは、この安全網がありません。

### Babelプラグインの@rolldown/plugin-babelへの移行

Babelでしか書けない変換（styled-componentsの表示名付与や提案段階の構文など）が残っているなら、`@rolldown/plugin-babel` を並べます。CHANGELOGが示す書き換えは次の形です。

```
npm install -D @rolldown/plugin-babel @babel/core@7 @types/babel__core @babel/plugin-proposal-throw-expressions@7
```

```
import babel from '@rolldown/plugin-babel'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    babel({ plugins: ['@babel/plugin-proposal-throw-expressions'] }),
  ],
})
```

もう1つの変更が `react` と `react-dom` の自動dedupeの廃止です。ただしこれはv5.0.0で入った変更で、v4から一気に上げる場合に影響します。同じReactが2つ読み込まれて「Invalid hook call」が出るなら、まずpackage.jsonのバージョン不一致を疑い、必要なら `resolve.dedupe` に自分で書きます。

## React Compilerを @vitejs/plugin-react で有効にする2つの方法

[React Compiler](/tech/details/9415/)は `useMemo`・`useCallback` の手書きを不要にする自動メモ化ツールで、babel-plugin-react-compiler 1.0.0が2025年10月7日に公開されています。plugin-react v6での有効化は、Rust版とBabel版の2通りです。

### Rust版：react({ compiler: true })（6.1.0から・実験的）

6.1.0で、`oxc-transform-react`（React CompilerのRust移植）を使う `compiler` オプションが入りました。READMEは実験的な機能だと明記しています。

```
npm install -D oxc-transform-react
```

```
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react({ compiler: true })],
})
```

インストールには罠が1つあります。6.1.2が求めるのは `oxc-transform-react` の `^0.152.0` で、0系のキャレットなので0.152.xしか合いません。npmのlatestは0.155.0（2026-10-19）ですが、今回のnpm 11.17.0の検証では、版を付けずに入れると0.152.0が選ばれ、インストールに成功しました。`@latest` を付けると `ERESOLVE could not resolve` で失敗しました。入れ忘れたまま `compiler: true` にすると、ビルドは `` React Compiler requires the optional `oxc-transform-react` package. `` で止まるので、こちらは気づけます。

`compiler` にはReact Compilerの設定も渡せ、`react({ compiler: { compilationMode: 'annotation' } })` とすれば `"use memo"` を書いたコンポーネントだけが対象になります。6.1.2で `compiler.logDiagnostics` は非推奨になり、`compiler.reportDiagnostics` へ置き換わりました。

### Babel版：reactCompilerPreset と @rolldown/plugin-babel

`npm create vite@latest -- --template react-compiler-ts` が生成するのはこちらの構成で、[React公式のインストール手順](https://react.dev/learn/react-compiler/installation)もこの書き方を案内しています。

```
npm install -D @rolldown/plugin-babel @babel/core@7 @types/babel__core babel-plugin-react-compiler
```

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

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

`@babel/core` を7系に固定しているのには理由があります。npmのlatestは8.0.9で、`@rolldown/plugin-babel` 0.2.4のpeerもBabel 8を許すため、版を付けずに入れると8系が入ります。8.0.9の環境で `function Def({ step = 1 })` のように**既定値付きの分割代入でpropsを受けるコンポーネントは、警告なしでコンパイル対象から外れました**。テンプレートと同じ7.29.7に戻すとコンパイルされ、Rust版はどちらでもコンパイルされます。`react()` と `babel()` の並び順はどちらにしても結果は同じでした。

### 実測：500コンポーネントのビルド時間と出力

useStateと配列の絞り込みを持つ小さなコンポーネントを500個作り、Vite 8.3.5・plugin-react 6.1.2で `vite build` を3回ずつ実行しました（Intel Core i9-9880H・Node.js 26.5.0）。

| 構成                         | ビルド時間       | 出力JS       |
| -------------------------- | ----------- | ---------- |
| Compilerなし                 | 0.30〜0.34秒  | 378,232バイト |
| Rust版 compiler: true       | 0.49〜0.51秒  | 600,170バイト |
| Babel版（@babel/core 7.29.7） | 6.77〜6.79秒  | 600,170バイト |
| Babel版（@babel/core 8.0.9）  | 8.65〜10.11秒 | 600,170バイト |

今回の入力では、Rust版とBabel版の出力JSがSHA-1まで一致しました。メモ化のぶん出力は約1.6倍に増えますが、これはどちらの経路でも同じです。ビルド時間はBabel 7版がRust版の約13〜14倍でした。別の入力や設定で出力が一致する保証にはならない点は差し引いて読んでください。

### Rust版とBabel版の選び方

実験的機能を評価できる新規プロジェクトなら、今回の入力で出力が一致し、ビルド時間が短かったRust版を先に試すことを勧めます。反対に、`compiler: true` を避けるべきなのは、本番のビルド結果を安定させたいプロジェクトで「実験的」の表記を受け入れられない場合と、React Compiler以外のBabelプラグインもどのみち通す構成の場合です。後者はBabelをすでに回しているので、プリセットを1つ足すほうが構成が単純になります。React Compilerがどのコードをメモ化しないかの規則は[React Compilerの仕組みと導入方法](/tech/details/9415/)にまとめています。

## @vitejs/plugin-react と plugin-react-swc の違いと選び方

SWC版の `@vitejs/plugin-react-swc`（最新4.3.3・2026-07-30）は、開発時の変換をOxcではなく[Rust製コンパイラのSWC](/tech/details/16019/)で行う公式プラグインです。SWCはBabelの代わりとして作られたJavaScript/TypeScriptのコンパイラで、Next.jsの内部でも使われています。

| 項目             | plugin-react   | plugin-react-swc |
| -------------- | -------------- | ---------------- |
| 最新版            | 6.1.2          | 4.3.3            |
| 開発時の変換         | Oxc            | SWC              |
| 対応Vite         | 8              | 4〜8              |
| React Compiler | compiler オプション | リリース版には無し        |
| 週間DL（10/16〜22） | 約6,334万        | 約593万            |

Vite 7以前は「Babelより速いFast Refresh」がSWC版を選ぶ理由でしたが、v6でplugin-reactもRust製のOxcで変換するようになり、この理由は無くなりました。vite.devはSWC版を「SWCプラグインを使うために、開発時にOxcをSWCへ置き換える」ものと説明しています。本番ビルドでSWCが動くのは、SWCプラグインを指定した場合と、4.2.0以降で `useAtYourOwnRisk_mutateSwcOptions` を指定した場合です。GitHubのmainブランチのREADMEは、ほとんどの用途は標準のplugin-reactで足りるとして、そちらを推奨しています。

結論として、新規プロジェクトは標準版です。SWC版を選ぶのは、`@swc/plugin-*` などのSWCプラグインを開発時にも通したい場合、`useAtYourOwnRisk_mutateSwcOptions` でSWC固有の変換オプション（デコレーターの版指定など）を変えたい場合、Vite 7以前に留めながらBabelを避けたい場合の3つです。もう1つの `@vitejs/plugin-react-oxc` は、plugin-react 5.0.0がrolldown-viteでOxcを使うようになった時点で非推奨になっており、対応Viteも6.3〜7のままです。Viteの次の形として出てきた統合ツールチェーンについては[Vite+の使い方と既存Vite案件の移行手順](/tech/details/18107/)を参照してください。

## vanilla-extractと@vitejs/plugin-reactの併用設定

スタイルをTypeScriptで型付きに書く場合は、`@vanilla-extract/vite-plugin`（最新5.2.6・対応Vite 5〜8）を同じ `plugins` 配列に並べます。Vite 8.3.5・plugin-react 6.1.2の組み合わせでビルドが通ることを確認しました。

```
npm install -D @vanilla-extract/vite-plugin @vanilla-extract/css
```

```
import react from '@vitejs/plugin-react'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
})
```

スタイルは `.css.ts` ファイルに書き、エクスポートしたクラス名をコンポーネントの `className` に渡します。

```
// src/styles.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  padding: '8px 16px',
  backgroundColor: '#2563eb',
  color: '#fff',
})
```

ビルドすると `._3sgu7w0{color:#fff;background-color:#2563eb;padding:8px 16px}` のような静的CSSになり、実行時のスタイル計算は残りません。クラス名はファイルごとに一意化されるので名前の衝突も起きません。小さな画面ならCSS Modulesで足り、デザイントークンを複数のパッケージで共有する規模になってから型の恩恵が効いてきます。Vite + ReactでWebアプリを作る段階から設計を相談したい場合は、一創の[フルスクラッチ開発](https://www.issoh.co.jp/service/system/fullscratch/)でも対応しています。

## よくある質問

### @vitejs/plugin-react のインストール方法は？

`npm install -D @vitejs/plugin-react` で入れ、`vite.config.ts` の `plugins` に `react()` を書きます。新規なら `npm create vite@latest my-app -- --template react-ts` で設定済みのプロジェクトができます。v6はVite 8系と、Node.js 20.19.0以降の20系または22.12.0以降が必要です。

### @vitejs/plugin-react の最新バージョンはいくつですか？

2026年10月時点で6.1.2（2026-10-05公開）です。Vite 7以前を使っているなら、対応する最後の版は5.2.0です。`npm view @vitejs/plugin-react version` で手元から確認できます。

### plugin-react と plugin-react-swc はどちらを使うべきですか？

新規なら標準の `@vitejs/plugin-react` です。v6の標準版はOxcで変換するため、Babelを避ける目的だけでSWC版を選ぶ必要はありません。SWC版は、SWCプラグインを開発時にも使いたい場合に選びます。

### Vite 8にしたら react({ babel }) のBabelプラグインが効かないのはなぜですか？

v6で `babel` オプションが廃止されたためです。指定してもビルドはエラーなく通るので気づきにくく、`tsc` の型チェックでTS2353として出ます。Babelプラグインは `@rolldown/plugin-babel` へ、React Compilerは `react({ compiler: true })` か `reactCompilerPreset()` へ書き換えます。

### @vitejs/plugin-react-oxc は使う必要がありますか？

ありません。plugin-react 5.0.0がrolldown-viteでOxcを使うようになった時点で非推奨になり、対応Viteも6.3〜7のままです。Vite 8では標準のplugin-reactがOxcで変換します。

## 関連記事

- [Vite + Reactの環境構築手順｜Viteとは・Vite 8.3の変更点とTypeScript 7対応](/tech/details/3587/)
- [React Compilerとは？自動メモ化の仕組みと導入方法・useMemoとの違いを解説](/tech/details/9415/)
- [SWCとは？Rust製コンパイラの設定と採用判断を実装目線で解説](/tech/details/16019/)
- [Oxcとは？Rust製JavaScriptツールチェーンの構成と使い方・SWCとの違い](/tech/details/9737/)
- [Vite+とは？vpコマンドの使い方と1.0の中身・既存Vite案件の移行手順を実装目線で解説](/tech/details/18107/)

---

出典: [@vitejs/plugin-react とは？v6.1の導入とvite.config設定・React Compiler・SWC版との違い](<https://www.issoh.co.jp/tech/details/2680/>)（株式会社一創）