Turbopack: Module not found の原因と解決策

概要

Next.jsのTurbopackを使用している際に、モジュールの解決に失敗した場合に発生するエラーです。

エラーメッセージ

 × Module not found: Can't resolve '@/components/Button'

 ⨯ ./src/app/page.tsx
Module not found: Can't resolve 'some-package'

Error: Cannot find module './styles.css'

原因

1. パスエイリアスの設定不備

2. パッケージがインストールされていない

3. Turbopackでサポートされていない機能

4. ファイルパスの大文字小文字

解決策

1. パスエイリアスの設定

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// next.config.js（通常は不要、tsconfig.jsonから自動読み込み）
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        '@': './src',
      },
    },
  },
}

2. パッケージのインストール

1
2
3
4
npm install some-package

# 型定義も必要な場合
npm install --save-dev @types/some-package

3. Turbopackの制限を確認

1
2
3
4
5
# Turbopackを使用しない場合
next dev  # Webpackを使用

# Turbopackを使用する場合
next dev --turbo

4. サポートされていないローダーの対処

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        // カスタムローダーの設定
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

5. CSSモジュールの問題

1
2
3
4
5
// CSS Modulesは通常通りサポート
import styles from './Button.module.css'

// グローバルCSSはapp/layout.tsxでインポート
import './globals.css'

6. 動的インポートの問題

1
2
3
4
// 動的インポートは通常通り動作
const DynamicComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
})

7. キャッシュをクリア

1
2
3
4
5
6
7
8
9
# .nextディレクトリを削除
rm -rf .next

# node_modulesを再インストール
rm -rf node_modules
npm install

# 開発サーバーを再起動
npm run dev --turbo

8. Webpackにフォールバック

1
2
# Turbopackで問題が解決しない場合、一時的にWebpackを使用
next dev  # --turboなし

Turbopackのデバッグ

1
2
3
4
5
# 詳細なログを出力
NEXT_TURBOPACK_TRACING=1 next dev --turbo

# ビルド情報を確認
NEXT_DEBUG=1 next dev --turbo

Turbopack: Module not found

概要

エラーメッセージ

原因

1. パスエイリアスの設定不備

2. パッケージがインストールされていない

3. Turbopackでサポートされていない機能

4. ファイルパスの大文字小文字

解決策

1. パスエイリアスの設定

2. パッケージのインストール

3. Turbopackの制限を確認

4. サポートされていないローダーの対処

5. CSSモジュールの問題

6. 動的インポートの問題

7. キャッシュをクリア

8. Webpackにフォールバック

Turbopackのデバッグ

関連エラー

関連エラー

Next.js の他のエラー