部署TypeScript应用到Vercel遇“找不到模块”错误求助

针对你遇到的本地正常但Vercel构建报错的问题，给你几个实用的排查和解决方向：

• 清除Vercel构建缓存
  Vercel默认会缓存构建产物和依赖，有时候即使你本地修改了代码，线上构建还在使用旧缓存。进入Vercel项目的构建详情页面，点击「Clear Cache & Redeploy」，强制重新拉取代码并构建。

• 核对文件名大小写
  本地系统（如macOS）是大小写不敏感的，但Vercel运行在Linux环境下，大小写严格区分。比如你本地文件是Analytics.tsx，但导入路径写的./components/analytics，本地能正常识别，线上就会找不到模块。仔细检查文件名和导入路径的大小写是否完全匹配。

• 检查文件是否被忽略
  确认analytics.tsx没有被添加到.gitignore文件中，导致该文件没有推送到Git仓库，Vercel拉取代码时自然找不到。另外，检查Vercel项目设置里的「Ignored Build Step」或自定义忽略规则，是否排除了这个文件。

• 修复pnpm构建的依赖问题
  如果你用pnpm作为包管理器，可能存在软链接导致的路径识别问题：

  1. 在项目根目录创建.npmrc文件，添加package-import-method=copy，强制pnpm复制依赖文件而非使用软链接；
  2. 修改Vercel的构建命令为pnpm install --shamefully-hoist && pnpm run build，强制依赖提升，避免路径解析错误。

• 调整TypeScript配置
  关于导入扩展名的报错，不要手动添加.tsx，而是检查tsconfig.json的配置：

  • 确保compilerOptions中moduleResolution设置为"bundler"（Next.js 13+推荐）或"node"；
  • 开启"allowSyntheticDefaultImports": true和"esModuleInterop": true；
  • Next.js项目不需要开启allowImportingTsExtensions，框架的构建工具会自动处理扩展名。

• 对齐本地与线上环境版本
  确认本地的Node.js、TypeScript、Next.js版本和Vercel构建环境一致：

  1. 在Vercel项目设置的「Build & Development Settings」中，指定与本地node -v一致的Node.js版本；
  2. 检查package.json中typescript、next等依赖的版本，确保本地安装的版本和线上构建时安装的版本匹配（可以锁定版本号，避免自动升级）。

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