React19+viteのmanualChunkで思った効果が出なかったメモ

概要

viteのチャンクサイズが大きくて警告が出たので分割をしようとしたら思った挙動と違ったのでメモ。
結論から言うと、manualChunksで指定する文字列がreact-domではなくreact-dom/clientの指定が必要だった。

ソースコード

環境

ライブラリ	バージョン
vite	6.2.2
react	19.0.0

何が起きたか

期待していた挙動

indexからreactのコードが抜かれている

$ bun run build
$ tsc -b && bunx --bun vite build
vite v6.2.2 building for production...
dist/assets/index-DIa45wLs.js     18.24 kB │ gzip:  6.98 kB
dist/assets/react-D0zjqeK7.js    260.53 kB │ gzip: 87.88 kB
✓ built in 1.91s

実際に起きた挙動

index.jsの中にreactのコードも入っている。

$ bun run build
$ tsc -b && bunx --bun vite build
vite v6.2.2 building for production...
dist/assets/react-IIfN_Pv2.js     86.48 kB │ gzip: 30.86 kB
dist/assets/index-oaeOqy8N.js    191.19 kB │ gzip: 64.28 kB
✓ built in 1.82s

index-oaeOqy8N.jsには下記のようなコメントで始まるソースも入っていた。

/**
 * @license React
 * scheduler.production.js

このときの設定は下記であった。

vite.config.ts

// 省略
export default defineConfig({
  // 省略
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-router', 'react-dom'],
          // 省略
        },
      },
    },
  },
});

対応

この記事で'react-dom/serverをexcludeしているのをみて、下記のように修正したら期待通りの動作になった。

vite.config.ts

// 省略
export default defineConfig({
  // 省略
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
-          react: ['react', 'react-router', 'react-dom'],
+          react: [
+            'react',
+            'react-router',
+            'react-dom/client',
+          ],
          // 省略
        },
      },
    },
  },
});

実際にソースコードでも下記のようにimportしている。コードで書いている形式にのっとる必要があった模様。

main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './app/App.tsx';


createRoot(root).render(
  <StrictMode>
    <App />
  </StrictMode>,
);