Next.js项目中ESLint的import/no-unresolved模块路径解析错误求助

看起来你的问题核心是ESLint的路径别名配置没有和jsconfig.json保持一致，导致lint时无法识别@/components/...这种导入路径。我给你一步步梳理解决方案：

1. 简化并统一jsconfig.json的别名配置 #

你当前的jsconfig里配置了多个冗余的别名（比如@/components/*、@/pages/*），其实@/*已经覆盖了./src/*下的所有目录，完全可以简化，避免冲突：

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

这样@/components/Navbar/Navbar就会自动映射到./src/components/Navbar/Navbar，逻辑更清晰。

2. 修正ESLint的路径解析配置 #

你的eslintrc.json里的import/resolver配置和jsconfig不一致，这是报错的关键。推荐两种方案：

方案一：手动同步别名映射 #

确保import/resolver/alias的映射和jsconfig完全对齐，同时确保你已经安装了eslint-plugin-import和eslint-import-resolver-alias：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

然后修改eslintrc.json的settings部分：

"settings": {
  "react": { "version": "detect" },
  "import/resolver": {
    "alias": {
      "map": [
        ["@/*", "./src/*"]
      ],
      "extensions": [".js", ".jsx", ".json"]
    }
  }
}

方案二：自动读取jsconfig配置（更省心） #

安装eslint-import-resolver-jsconfig，让ESLint直接读取jsconfig的路径配置，不用手动同步：

npm install eslint-import-resolver-jsconfig --save-dev

然后修改eslintrc.json的settings：

"settings": {
  "react": { "version": "detect" },
  "import/resolver": {
    "jsconfig": {
      "config": "jsconfig.json"
    },
    "node": {
      "extensions": [".js", ".jsx"]
    }
  }
}

3. 检查文件实际路径 #

确认你的Navbar组件确实存在于src/components/Navbar/Navbar.js（或.jsx）路径下，虽然你开启了caseSensitive: false，但尽量保持导入路径和实际文件的大小写一致，避免潜在问题。

4. 刷新配置缓存 #

最后重启你的编辑器（比如VS Code），或者手动清除ESLint缓存，再运行npm run lint试试：

npx eslint --clear-cache
npm run lint

这样应该就能解决import/no-unresolved的报错了。

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