vercelのデプロイが失敗する（next.js）

Question

実現したいこと

vercelでnext.jsのデプロイが失敗してしまいます。

Import trace for requested module:
./src/components/page/Index/Index.jsx
./src/components/page/Post/Archive.jsx
Module not found: Can't resolve '@/features/post/components/ThumbScaleModal' in '/vercel/path0/src/components/page/Post'

このように、モジュールがnot foundと返ってきます。

ローカルでnpm run devをしている最中は、ちゃんと動きます。

以下のように、コンポーネントは全部srcディレクトリにまとめて、next.config.jsでエイリアスを設定して@で読み込めるようにしています。

const path = require('path');
const nextConfig = {
  reactStrictMode: true,
  images: {
    // 画像読み込みを許可するドメイン
    domains: ['xxx'],
  },
  // import xxx from '@/components/xxx' で読み込めるように
  webpack(config, options) {
    config.resolve.alias['@'] = path.join(__dirname, 'src')
    return config;
  },
}

module.exports = nextConfig

このエイリアスがいけないのかもいまいち分かっていなくて、ローカルではちゃんと動くのにvercelでデプロイするときだけエラーになる理由が全くわからなかったので質問させて頂きました。

Answer 1

ファイル名の大文字小文字の問題でした。
ローカルでは大文字小文字どちらでも大丈夫でしたが、デプロイ先では厳密に区別されるみたいで、それでnot foundになっていました。