Next.js 12导入别名（Import Alias）无法生效的问题排查

问题根源 #

你的tsconfig.json中compilerOptions.paths配置存在两处错误，导致VS Code的TypeScript语言服务无法正确解析别名路径：

• @src/: ["src/"] 缺少通配符*，无法匹配src/下的子目录（比如src/containers/dashboard）
• @/*: ["*"] 会优先匹配所有以@/开头的路径，覆盖后续更具体的别名规则，导致@/src/这类路径解析逻辑冲突

修复步骤 #

1. 修正tsconfig.json的paths配置 #

替换原paths字段为以下内容，确保通配符正确，且具体别名优先于通用别名：

"paths": {
  "@/src/*": ["src/*"],
  "@/assets/*": ["assets/*"],
  "@/config/*": ["config/*"],
  "@/pages/*": ["pages/*"],
  "@/public/*": ["public/*"],
  "@/*": ["*"]
}

同时清理include字段的冗余内容，保持简洁：

"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx"
],

2. 简化webpack配置（可选） #

Next.js 12会自动读取tsconfig.json中的paths配置生成webpack别名，无需手动重复配置。可以删除next.config.js中手动添加的config.resolve.alias部分，避免冲突：

// next.config.js 简化后
module.exports = {
  webpack(config) {
    // 保留其他webpack配置，移除手动添加的alias部分
    return config;
  }
};

3. 重启VS Code的TypeScript服务 #

修改配置后，VS Code可能需要刷新缓存：

• 按下Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac）
• 输入并执行TypeScript: Restart TS Server

验证 #

完成以上步骤后，VS Code中的Cannot find module '@/src/containers/dashboard'错误会消失，同时项目编译和运行都能正常工作。

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