Webpack编译报错：Swiper包路径未导出问题求助

问题重现 #

Compiled with problems:
ERROR in ./node_modules/myDependencyPackage/index.js
Module not found: Error: Package path ./react/swiper-react.js is not exported from package c:...\myAppFolder\node_modules\swiper (see exports field in c:...\myAppFolder\node_modules\swiper\package.json)

环境信息 #

• NodeJS 16
• React 17.0.2
• Webpack ^5.88.0
• Swiper 8.4.7

问题根因 #

Webpack 5严格遵循package.json的exports字段做模块解析，你的依赖包myDependencyPackage使用了旧的Swiper导入路径./react/swiper-react.js，但Swiper 8.x版本的exports中未配置该路径，导致解析失败。

解决方案 #

1. 修复依赖包的导入路径（推荐） #

联系myDependencyPackage的维护者，提交issue或PR，要求将Swiper的导入方式更新为Swiper 8+官方规范：

• 依赖包中的错误写法：

import Swiper from './react/swiper-react.js'

• 替换为正确路径：

import { Swiper } from 'swiper/react'

2. 配置Webpack路径别名绕过 #

在项目的webpack配置文件中添加resolve.alias，将旧路径映射到正确的文件位置：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  resolve: {
    alias: {
      // 精准匹配旧导入路径，避免影响其他模块
      './react/swiper-react.js$': path.resolve(__dirname, 'node_modules/swiper/react/swiper-react.js'),
    },
  },
};

3. 使用patch-package打合规补丁 #

替代直接修改node_modules的合规方案，步骤如下：

1. 安装patch-package：

npm install patch-package --save-dev

2. 手动修改node_modules/swiper/package.json的exports字段，添加：

"./react/swiper-react.js": "./react/swiper-react.js"

3. 生成补丁文件：

npx patch-package swiper

4. 后续执行npm install时，patch-package会自动将补丁应用到Swiper包中。

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