Vite+React项目引入Stripe包后出现rc-util模块解析错误求助

问题根源 #

这个错误是因为rc-input-number依赖的rc-util版本，和Stripe相关包间接引入的rc-util版本存在冲突，导致找不到指定的useMobile钩子文件。把路径标记为external没用，因为rc-util是项目依赖树里的必要模块，不能被排除在外。

解决办法 #

1. 强制统一rc-util版本 #

通过锁定rc-util的版本，让所有依赖都使用同一个兼容版本：

• npm用户：
  1. 安装强制版本工具：

     npm install -D npm-force-resolutions
     

  2. 在package.json里添加以下配置：

     "resolutions": {
       "rc-util": "^5.38.1"
     },
     "scripts": {
       "preinstall": "npx npm-force-resolutions"
     }
     

  3. 删除依赖和锁文件后重装：

     rm -rf node_modules package-lock.json
     npm install
     

• yarn用户：
  1. 在package.json里添加：

     "resolutions": {
       "rc-util": "^5.38.1"
     }
     

  2. 删除依赖和锁文件后重装：

     rm -rf node_modules yarn.lock
     yarn install
     

2. 调整依赖版本匹配 #

检查rc-input-number对rc-util的版本要求，调整两者版本到兼容状态：

1. 查看rc-input-number的依赖要求：

   npm show rc-input-number peerDependencies
   

2. 根据输出结果，修改package.json中rc-input-number或rc-util的版本，然后删除依赖和锁文件重装。

3. 配置Vite预构建依赖 #

在vite.config.js里添加优化配置，强制Vite预构建rc-util和rc-input-number：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['rc-util', 'rc-input-number']
  }
});

保存后重启开发服务。

4. 清除Vite缓存 #

缓存可能导致解析异常，执行以下命令清除后重启：

rm -rf node_modules/.vite
npm run dev

验证 #

完成上述步骤后，启动npm run dev检查错误是否消失。如果还是不行，彻底删除node_modules和锁文件，重新安装所有依赖再试。

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