NextJS中导入别名突然引发模块未找到错误

针对你遇到的NextJS项目导入别名突然失效、只能用绝对路径的问题，可按以下步骤排查修复：

• 确认jsconfig.json的位置
  该文件必须放在项目根目录（与package.json、next.config.js同级），如果误移到src或其他子目录，别名规则会直接失效。

• 修正paths映射规则
  你的绝对路径是/src/components/...，说明组件实际在src目录下，而当前jsconfig.json中@/*映射到./*，会将@/components解析为项目根目录下的components（而非src/components）。若之前正常是因为目录结构变更，可修改配置：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }
  }
  

• 清除NextJS缓存
  缓存堆积可能导致别名规则不生效，执行以下命令后重启开发服务器：

  next clean
  

• 补充webpack别名配置（NextJS 13+ App Router）
  部分情况下仅靠jsconfig.json不够，需在next.config.js中手动配置webpack的resolve别名：

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

• 排查大小写与文件结构
  Linux系统大小写敏感，检查components目录、文件名的拼写是否与导入语句完全一致；同时确认服务器部署时，jsconfig.json和src目录是否完整上传，没有遗漏或路径错误。

• 重置VS Code缓存
  关闭VS Code，删除项目根目录下的.vscode文件夹（若存在），重新打开编辑器，避免编辑器缓存导致的别名识别异常。

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