Next.js项目构建报错：找不到@/components/ui/toaster模块及类型声明

以下是你可能遗漏的几个关键排查方向，按顺序验证：

1. 补全tsconfig.json的extends字段 #

Next.js项目的tsconfig.json必须继承官方配置，否则TypeScript的路径解析规则无法与Next.js编译逻辑兼容。确保配置包含：

{
  "extends": "next/core-web-vitals",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

2. 确认tsconfig.json的include覆盖组件目录 #

TypeScript仅解析include字段指定的文件，若未包含组件目录，会导致无法识别组件模块。完善include配置：

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. 验证组件的导出方式匹配导入语法 #

你使用的是默认导入import Toaster from '@/components/ui/toaster'，因此toaster.tsx必须使用默认导出：

// toaster.tsx
export default function Toaster() {
  // 组件逻辑
}

如果组件是命名导出（export const Toaster = () => {}），需同步改为命名导入：import { Toaster } from '@/components/ui/toaster'。

4. 清理缓存并重启TypeScript服务 #

• 除删除.next文件夹外，额外删除node_modules/.cache目录，再执行npm run build；
• 若使用VS Code，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Restart TypeScript Server清除语言服务缓存。

5. 同步next.config.js的webpack别名配置（可选） #

部分自定义webpack场景下，需手动同步别名配置。在next.config.js中添加：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname);
    return config;
  },
};

module.exports = nextConfig;

6. 严格校验路径大小写（针对Linux/macOS） #

这类系统的文件路径大小写敏感，需确保导入语句中的路径（@/components/ui/toaster）与实际文件路径（/components/ui/toaster.tsx）的大小写完全一致，避免出现Toaster.tsx和小写toaster导入的差异。

7. 重新安装依赖 #

若以上步骤无效，删除node_modules文件夹和package-lock.json（或yarn.lock），执行npm install重新安装所有依赖，排除依赖缓存导致的异常。

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