Next.js生产构建仅报React Swiper错误：无法解析swiper模块

问题概述 #

项目本地构建、运行均正常，但部署到Vercel时出现以下模块找不到的错误：

Module not found: Can't resolve 'swiper' in '/vercel/path0/components/home/swiper'
Module not found: Can't resolve 'swiper/react' in '/vercel/path0/components/home/swiper'
Module not found: Can't resolve 'swiper/css' in '/vercel/path0/components/home/swiper'

使用版本为 swiper@^8.4.4，导入方式遵循官方文档：

import { Pagination, A11y } from "swiper";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/a11y";

已尝试低版本解决方案、修改导入路径写法均无效，希望通过ESLint或其他方式解决问题。

解决方法 #

1. 确认依赖配置与锁定文件 #

• 检查package.json，确保swiper在dependencies字段中（而非devDependencies，生产环境不会安装开发依赖）
• 提交package-lock.json或yarn.lock到代码仓库，保证Vercel安装的依赖版本与本地完全一致

2. 配置ESLint模块解析（针对ESLint解决需求） #

在ESLint配置文件（如.eslintrc.js）中添加模块解析规则，让ESLint正确识别swiper的导入路径：

module.exports = {
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        moduleDirectory: ['node_modules', 'src/']
      }
    }
  }
};

该配置让ESLint遵循Node.js模块解析规则，避免误报模块不存在，同时辅助构建工具正确识别依赖路径。

3. 强制Vercel重新安装依赖 #

• 进入Vercel控制台的项目「Build & Development Settings」，开启自定义「Install Command」，设置为npm install --force或yarn install --force，强制清除缓存并重新安装所有依赖
• 也可在部署时手动触发「Clear Build Cache」操作

4. 验证导入路径与构建工具配置 #

测试绝对路径导入

尝试使用绝对路径导入来排查是否为路径解析问题：

import { Pagination, A11y } from '../../node_modules/swiper';
import { Swiper, SwiperSlide } from '../../node_modules/swiper/react';
import '../../node_modules/swiper/css';
import '../../node_modules/swiper/css/pagination';
import '../../node_modules/swiper/css/a11y';

如果此方式构建成功，说明是项目模块解析配置问题，需调整对应构建工具的resolve规则：

Webpack配置示例

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    modules: ['node_modules']
  }
};

Vite配置示例

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    preserveSymlinks: false, // 关闭该选项避免模块解析异常
  }
});

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