Vite で「Rollup failed to resolve import」がビルドで消えない

要約

[vite]: Rollup failed to resolve import "X" from "..." は、本番ビルドを担う rollup が、指定された import 先を見つけられないときに出る。

開発サーバーは esbuild ベースの依存最適化が曖昧さを吸収することがあり、vite build で初めて顕在化するのが厄介なところ。
原因は「未インストール」「パス誤り」「外部化漏れ」のいずれかが大半。

よくある原因

1. 未インストール: import しているパッケージが node_modules に無い。
2. パス・拡張子の誤り: 相対パスやエイリアスの綴り、拡張子が実ファイルと合っていない。
3. 外部化漏れ: CDN などで外から供給する依存を external 指定していない。
4. dev と build の差: dev では通っていたが、build の解決規則で落ちる。

解決策

1. 不足パッケージを入れる

npm install lodash-es

まずはメッセージの import 名を package.json と照らし、入れ忘れが無いか確認する。

2. 外部依存を external にする

// vite.config.js
export default {
  build: {
    rollupOptions: { external: ["some-cdn-lib"] },
  },
};

バンドルに含めず外部提供する依存は、external に列挙して rollup の解決対象から外す。

3. エイリアスとパスを合わせる

// vite.config.js
export default {
  resolve: { alias: { "@": "/src" } },
};

@/components/Foo のようなエイリアスを使うなら、resolve.alias の定義と実ディレクトリを一致させる。
相対 import は拡張子とファイル名の大文字小文字まで確認する。