V0でファイルがあるのに「ファイルが見つからない」問題が起きる理由と対処法まとめ
要約
V0(Vercel のアプリ生成/プレビュー環境)でアプリを作っていたところ、
Runtime Error
The file "XXXXXX" cannot be found. Make sure the file exists.
「ファイルが存在しているのに ‘見つからない’ エラーが出る」という現象に悩まされました。
原因は主に エイリアスパス(@/**)と Bulk Import が V0 のバンドラーで正しく解決されないこと。
そのため、相対パスでの直接インポートに切り替えることで安定した ― という学びをまとめます。
序論
V0 上で複数のフロントエンドアプリを試作していたのですが、
「このファイルは確かにあるのに ‘not found’」というエラーが頻発し、
プレビューが表示されず開発が止まってしまう場面が多くありました。
コード自体は書けるものの、プレビューが出ない=確認できないという状態はかなりストレスで、
一時的にV0を避けるほど影響を受けました。
原因と対策
1. エイリアスパス(@/**)が V0 で解決されない
Next.js や通常の開発環境ではよく使われる @/lib/** のようなエイリアスパスですが、
V0 のプレビュー環境ではバンドラー設定が異なるらしく、正しく解決されないケースがあります。
そのため、存在するファイルでも以下のようなエラーになる:
Module not found: Can't resolve '@/lib/mock-data/...'
対策
相対パスに変更するだけで解決します。
// ダメな例
import data from '@/lib/mock-data/xxxx-xx-xxx'
// 良い例
import data from '../../lib/mock-data/xxxx-xx-xxx'
2. Bulk Import(インデックス経由の一括インポート)がバンドラーに不向き
複数のモックデータ・定義ファイルを index.ts にまとめて
そこからインポートする(=Bulk Import)というよくある構成もV0では不安定でした。
// 例: すべて index.ts でまとめる
export * from './a'
export * from './b'
export * from './c'
これがV0では循環参照や解決順の問題を起こしやすく、読み込みエラーになりやすい。
対策
まとめずに、必要なファイルへ“直接”インポートする方が安定します。
// 良い例:直接インポート
import { something } from './a'
Bulk Import 自体が悪いというより、
V0 の内部バンドラーが Next.js と同じ挙動ではないため、
パス解決や依存解決が意図せず壊れる可能性が高いと考えています。
(正確な仕様は公開されていないので、詳しい人がいたら教えてほしい…!)
結論
1. インポートは相対パスを使う
@/ エイリアスはバンドラーが解決できずエラーになることがある。
2. Bulk Import(index.ts への集約)は避ける
必要なファイルを直接インポートした方が安全。
おわりに
V0 はとても魅力的なツールですが、
プレビュー環境が Next.js のローカル環境と完全に同じではないことに注意が必要です。
Discussion