Failed to resolve import の原因と解決策

概要

Viteでインポートしたモジュールが見つからない、または解決できない場合に発生するエラーです。

エラーメッセージ

[vite] Internal server error: Failed to resolve import "lodash" from "src/utils.ts". Does the file exist?

原因

パッケージ未インストール: npm installされていない
パスの間違い: 相対パスやエイリアスの設定誤り
CommonJSモジュール: ESMとCJSの互換性問題
サブパスのエクスポート: パッケージのexportsフィールドの制限

解決策

1. パッケージをインストール

1
npm install lodash

2. エイリアスを設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  }
});

3. CommonJSモジュールの対応

1
2
3
4
5
6
// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['lodash']
  }
});

4. 拡張子を明示

1
2
3
4
5
6
// 悪い例
import utils from './utils';

// 良い例
import utils from './utils.js';
// または tsconfig.json で設定

5. サブパスインポートの修正

1
2
3
4
5
// 悪い例（パッケージの exports 制限）
import something from 'package/dist/something';

// 良い例（公式のエクスポート）
import { something } from 'package';

6. node_modulesを再インストール

1
2
rm -rf node_modules .vite
npm install

7. TypeScript パス設定

1
2
3
4
5
6
7
8
9
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

概要

エラーメッセージ

原因

解決策

1. パッケージをインストール

2. エイリアスを設定

3. CommonJSモジュールの対応

4. 拡張子を明示

5. サブパスインポートの修正

6. node_modulesを再インストール

7. TypeScript パス設定

JavaScript の他のエラー