質問の文脈

問題の概要

Vercelでのデプロイ時に「RangeError: Maximum call stack size exceeded」が発生
ローカルビルドは成功するが、Vercel環境でのビルドが失敗
ビルドトレース収集時のmicromatchパターンマッチングで無限ループ

発生環境

ローカル: 成功
Vercel: 失敗
エラー箇所: ビルドトレース収集時

試行した解決策

設定ファイルの最適化
Webpack設定の調整
依存関係の再インストール
環境変数での無効化

期待する結果

Vercel環境でのビルド成功
本番環境への正常なデプロイ

エラーメッセージ

error
1RangeError: Maximum call stack size exceeded
2at parse (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:6313)
3at picomatch.makeRe (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:21670)
4at picomatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19637)
5at /vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19294
6at Array.map (<anonymous>)
7at picomatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:19286)
8at micromatch.isMatch (/vercel/path0/node_modules/next/dist/compiled/micromatch/index.js:15:1090)
9at /vercel/path0/node_modules/next/dist/build/collect-build-traces.js:245:48
10at shouldIgnore (/vercel/path0/node_modules/next/dist/build/collect-build-traces.js:75:9)
11at shouldIgnore (/vercel/path0/node_modules/next/dist/build/collect-build-traces.js:86:23

該当のソースコード

package.json
1{
2  "name": "sozai",
3  "version": "0.1.0",
4  "private": true,
5  "engines": {
6    "node": "20.x"
7  },
8  "scripts": {
9    "dev": "next dev",
10    "dev:nodemon": "nodemon --exec \"next dev\"",
11    "build": "NEXT_DISABLE_BUILD_TRACES=true NEXT_DISABLE_COLLECT_BUILD_TRACES=true next build",
12    "start": "next start",
13    "start:nodemon": "nodemon --exec \"next start\"",
14    "lint": "next lint",
15    "resize-images": "node scripts/resize-images.js",
16    "resize-images:smart": "node scripts/resize-images-smart.js",
17    "resize-images:force": "node scripts/resize-images-smart.js --force",
18    "resize-images:help": "node scripts/resize-images.js --help",
19    "create-samples": "node scripts/create-sample-images.js",
20    "process-all": "npm run create-samples && npm run resize-images:smart"
21  },
22  "dependencies": {
23    "lucide-react": "^0.303.0",
24    "next": "14.0.4",
25    "react": "^18",
26    "react-dom": "^18",
27    "sharp": "^0.34.3",
28    "swiper": "^11.2.10"
29  },
30  "devDependencies": {
31    "@types/node": "^20",
32    "@types/react": "^18",
33    "@types/react-dom": "^18",
34    "autoprefixer": "^10.0.1",
35    "eslint": "^8",
36    "eslint-config-next": "14.0.4",
37    "nodemon": "^3.1.10",
38    "postcss": "^8",
39    "tailwindcss": "^3.3.0",
40    "typescript": "^5"
41  }
42}

javascript
1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  images: {
4    domains: ['localhost', 'your-bucket.r2.cloudflarestorage.com'],
5    unoptimized: false,
6  },
7  // 実験的機能を無効化
8  experimental: {
9    serverComponentsExternalPackages: [],
10    instrumentationHook: false,
11  },
12  // Webpack設定でビルドトレース関連の問題を防ぐ
13  webpack: (config, { isServer, dev }) => {
14    if (!isServer) {
15      config.resolve.fallback = {
16        ...config.resolve.fallback,
17        fs: false,
18        path: false,
19        os: false,
20        crypto: false,
21        stream: false,
22        util: false,
23      };
24    }
25    
26    // ビルドトレース関連のプラグインを無効化
27    config.plugins = config.plugins.filter(plugin => {
28      return !(plugin.constructor.name === 'BuildTracePlugin' ||
29               plugin.constructor.name === 'TracePlugin');
30    });
31    
32    // ビルドトレース関連のルールを無効化
33    config.module.rules = config.module.rules.filter(rule => {
34      if (rule.use && Array.isArray(rule.use)) {
35        return !rule.use.some(use => 
36          use.loader && use.loader.includes('build-traces')
37        );
38      }
39      return true;
40    });
41    
42    // ビルドトレース関連の最適化を無効化
43    config.optimization = {
44      ...config.optimization,
45      splitChunks: {
46        ...config.optimization.splitChunks,
47        cacheGroups: {
48          ...config.optimization.splitChunks.cacheGroups,
49          default: false,
50          vendors: false,
51        },
52      },
53    };
54    
55    // ビルドトレース関連の設定を無効化
56    config.infrastructureLogging = {
57      level: 'error',
58    };
59    
60    return config;
61  },
62  // 基本的な設定
63  swcMinify: true,
64  compress: true,
65  // ビルド時の最適化
66  poweredByHeader: false,
67  generateEtags: false,
68  // ビルドトレースを無効化
69  onDemandEntries: {
70    maxInactiveAge: 25 * 1000,
71    pagesBufferLength: 2,
72  },
73  // 静的ファイルの最適化
74  staticPageGenerationTimeout: 120,
75  // ビルドトレースを無効化
76  distDir: '.next',
77  optimizeFonts: false,
78  // ビルドトレースを無効化
79  generateBuildId: async () => {
80    return 'build-' + Date.now();
81  },
82  // 出力設定
83  output: 'standalone',
84  // ビルド時の最適化
85  typescript: {
86    ignoreBuildErrors: false,
87  },
88  eslint: {
89    ignoreDuringBuilds: false,
90  },
91}
92
93module.exports = nextConfig

vercel.json
1{
2  "framework": "nextjs",
3  "buildCommand": "npm run build",
4  "installCommand": "npm install",
5  "outputDirectory": ".next"
6}

# 最小限の除外設定（micromatchの問題を回避）
node_modules
.next
.git
*.log
.env*

# 画像ディレクトリ（ビルドトレースの問題を防ぐ）
public/images
public/images/originals
public/images/thumbnails
public/images/illustrations

# 画像ファイル（具体的な拡張子）
*.png
*.jpg
*.jpeg
*.gif
*.svg
*.webp

# 開発用ファイル
scripts
*.md
*.html
env.example

# キャッシュファイル
.resize-cache.json
*.cache
*.tmp
*.temp

# ビルド関連ファイル
.vercelignore
vercel.json

sozai/
├── app/
│   ├── components/
│   │   ├── IllustrationCard.tsx
│   │   ├── ImageSlideshow.tsx
│   │   ├── Modal.tsx
│   │   ├── RankingItem.tsx
│   │   └── Hero.tsx
│   ├── data/
│   │   └── illustrations.ts
│   ├── types/
│   │   └── illustration.ts
│   ├── api/
│   │   └── downloads/
│   │       └── route.ts
│   ├── terms/
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
│   └── images/
│       ├── originals/
│       ├── thumbnails/
│       └── illustrations/
├── scripts/
│   ├── resize-images.js
│   └── resize-images-smart.js
├── package.json
├── next.config.js
├── vercel.json
├── .vercelignore
└── tailwind.config.js