ツール
Vite
Vue.js 作者の Evan You による次世代フロントエンドビルドツール。開発時は ESM ベース、本番は Rollup でバンドルする。
問題一覧（9）
Vite で path alias（@/）が解決できない
vite.config.ts で resolve.alias を設定しても @/components/... が解決できない場合、Vite 側の alias と TypeScript の paths の両方を揃える必要がある。
更新: 2026-09-07、実行例あり、タグ: alias、paths、tsconfig
Vite ビルドで chunk size warning（500kB 超過）を消せない
Vite ビルド時の chunk size warning は、build.rollupOptions.output.manualChunks（Vite 8 では build.rolldownOptions.output.codeSplitting）でベンダーを分割するか、build.chunkSizeWarningLimit で閾値を引き上げて対処する。
更新: 2026-09-22、実行例あり、タグ: build、chunk、rollup
Vite で CSS Modules のクラスが適用されない
Vite は *.module.css / *.module.scss のファイル名を CSS Modules として自動処理するが、命名が外れている、import から styles.foo を経由していない、css.modules.localsConvention のずれでケバブケース名が取れない、などで適用されないことがある。
更新: 2026-09-18、実行例あり、タグ: css-modules、css、postcss
Vite で環境変数（import.meta.env）が読み込めない
Vite は VITE_ プレフィックスを付けた変数のみをクライアントへ公開する。.env を置いたのに undefined になる典型例と、サーバー専用変数の扱いを整理する。
更新: 2026-09-07、実行例あり、タグ: env、import-meta-env、vite-prefix
Vite で HMR (Hot Module Replacement) が反映されない
Vite の HMR は ESM 経由のモジュール置換で動く。ファイル監視・WebSocket 接続・Fast Refresh の更新境界・副作用モジュールのいずれかでつまずくと反映されない。DevTools の Console と Network タブで状態を確認し、原因を順に切り分ける。
更新: 2026-08-20、タグ: hmr、hot-reload、dev-server
vite preview がブランク（真っ白）で表示できない
vite preview がブランクになる原因の大半は base 設定漏れによるアセットの 404。GitHub Pages 等のサブパス配信時は vite.config.ts の base を本番値に揃える必要がある。
更新: 2026-06-02、タグ: preview、build、base
Vite で「process is not defined」が解決できない
ブラウザには Node のグローバル process が無いため、process.env を参照するコードが実行時に落ちる。Vite では import.meta.env を使うか、define で process.env を置き換える。
更新: 2026-09-25、実行例あり、タグ: env、process、browser
Vite の dev server proxy が機能しない
Vite の server.proxy が効かない原因のほとんどは、リクエストパスのプレフィックスが proxy のキーにマッチしていない、changeOrigin 指定漏れで Host ヘッダが弾かれている、クライアントが絶対 URL を叩いているの 3 つです。DevTools の Network タブで実際の URL を確認するのが近道です。
更新: 2026-06-25、タグ: proxy、dev-server、cors
Vite で「Rollup failed to resolve import」がビルドで消えない
本番ビルド（rollup）が import 先を解決できないと出る。依存の未インストール・パス誤り・外部化漏れが主因で、install / パス修正 / rollupOptions.external で対処する。
更新: 2026-09-09、実行例あり、タグ: rollup、build、resolve