NextJS项目Vercel部署报错：无法解析@/models/Users

以下是针对该问题的排查和解决步骤：

1. 检查路径别名配置是否被Vercel识别 #

确保你的tsconfig.json或jsconfig.json中的路径别名配置正确，且Vercel能读取到：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 请根据项目实际目录结构调整路径
    }
  }
}

如果项目使用TypeScript，确认Vercel部署时已启用TypeScript编译。若自定义了next.config.js的webpack配置，需手动添加别名映射：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, './src'),
    };
    return config;
  },
};

2. 排查文件名大小写问题 #

Vercel部署环境基于Linux，文件名严格区分大小写，但本地Windows/macOS默认不区分。检查：

• 实际文件是否为users.ts（小写）但导入时写的@/models/Users（大写）
• 目录名是否存在大小写不一致，比如Models而非models

3. 确保pnpm依赖配置正确 #

• 提交pnpm-lock.yaml文件到代码仓库，Vercel需要它来精准安装依赖
• 在Vercel项目设置的「Build & Development Settings」中，确认Package Manager选择为pnpm
• 本地执行pnpm install --frozen-lockfile模拟Vercel的依赖安装流程，排查是否有异常

4. 检查文件扩展名与导入方式 #

确认导入时指定了正确的文件扩展名：

// 错误示例：未明确扩展名
import User from '@/models/Users'
// 正确示例：根据文件类型添加.ts/.tsx/.js等扩展名
import User from '@/models/Users.ts'

部分本地环境会自动补全扩展名，但Vercel的webpack配置可能需要明确指定。

5. 清除Vercel缓存并重新部署 #

在Vercel控制台的部署详情页，点击「Redeploy」并勾选「Clear build cache」，强制重新构建，避免缓存导致的路径解析异常。

内容的提问来源于stack exchange，提问作者user30928748