Next.js（JavaScript）项目@导入别名报错：Module not found: Can't resolve

1. 检查/配置jsconfig.json #

JavaScript项目的路径别名依赖根目录下的jsconfig.json文件，确认文件存在且配置正确：

• 若无此文件，直接在项目根目录新建
• 配置需匹配你的目录结构，示例（假设源码在src目录）：

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

如果组件直接在根目录components下，将paths改为"@/*": ["components/*"]即可。

2. 验证实际文件路径与拼写 #

• 确认@/components/Forms/Login对应的真实文件存在，比如对应./components/Forms/Login.js或Login.jsx
• 检查文件名和目录名的大小写，Linux/macOS环境下路径区分大小写，Windows不区分，避免跨环境开发导致的问题

3. 重启Next.js开发服务器 #

修改配置文件后，必须完全停止当前的npm run dev或yarn dev进程，再重新启动服务器，否则新的别名配置不会生效。

4. 处理Next.js版本与缓存问题 #

• 若项目使用较旧的Next.js版本，可能存在jsconfig支持的bug，尝试升级到稳定版：

npm install next@latest

• 升级后清理缓存，避免依赖冲突：

rm -rf .next node_modules package-lock.json
npm install

5. 排查webpack配置冲突 #

如果项目自定义了next.config.js的webpack配置，检查是否存在resolve.alias配置，确保它和jsconfig.json的别名规则一致，避免互相覆盖。示例配置：

const path = require('path');

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

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