Swiper React运行正常但ESLint提示无法解析'swiper/react'模块路径

这个报错的核心原因是Swiper v7采用了ESM规范的exports字段定义模块入口，而Next.js 11配套的默认ESLint依赖版本不支持识别该字段，属于ESLint误报，不影响实际项目运行，可通过以下任意一种方式处理：

方案1：全局配置ESLint忽略Swiper路径检查（最简便） #

在项目根目录的ESLint配置文件（通常为.eslintrc.json或.eslintrc.js）中添加以下配置，直接跳过对Swiper相关模块的路径校验：

{
  "settings": {
    "import/ignore": ["swiper/react", "swiper/css/*"]
  }
}

如果只需要临时处理单文件的报错，也可以在对应导入语句上方添加单行忽略注释：

// eslint-disable-next-line import/no-unresolved
import { Swiper, SwiperSlide } from 'swiper/react'
// eslint-disable-next-line import/no-unresolved
import 'swiper/css'
// eslint-disable-next-line import/no-unresolved
import 'swiper/css/free-mode'

方案2：升级ESLint导入解析依赖 #

更新eslint-plugin-import和eslint-import-resolver-node到最新版本，新版本已支持识别exports字段定义的模块入口：

npm install eslint-plugin-import@latest eslint-import-resolver-node@latest --save-dev

安装完成后重启编辑器的ESLint服务即可消除报错。

方案3：配置ESLint解析器支持ESM路径 #

在ESLint配置文件中添加ESM解析支持配置：

module.exports = {
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        esm: true
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Iuri Magnago Pinto