Antd组件Props跳转异常：主项目误指向依赖库rc-select而非自身

问题场景 #

• 子项目里使用TreeSelect时，Props能正确关联antd主库，dropdownClassName会被标记为废弃，popupClassName可正常识别
• 主项目导入该子项目后，TreeSelect的Props错误关联到底层依赖rc-select，导致popupClassName不被识别，dropdownClassName也无废弃提示
• 主、子项目antd版本一致或仅差1-2个补丁版本，导入语句完全相同

排查与解决步骤 #

1. 检查并统一依赖版本 #

项目中可能存在多份antd或rc-select实例，导致类型关联混乱：

• 执行npm ls antd或yarn list antd，查看主、子项目是否有嵌套安装的antd包
• 执行npm ls rc-select，确认是否有多个版本的rc-select被引入
• 若存在重复，在主项目package.json中添加对应字段强制统一版本：

  // npm 使用 overrides
  "overrides": {
    "antd": "^x.x.x",
    "rc-select": "^x.x.x"
  }
  // yarn 使用 resolutions
  "resolutions": {
    "antd": "^x.x.x",
    "rc-select": "^x.x.x"
  }
  

  之后重新执行npm install或yarn install

2. 调整模块解析配置 #

如果使用webpack或vite，确保主项目优先加载根目录的node_modules：

• webpack：在resolve.modules中优先添加根目录node_modules路径

  const path = require('path');
  module.exports = {
    resolve: {
      modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
    }
  }
  

• vite：在resolve.dedupe中指定需要去重的依赖

  import { defineConfig } from 'vite';
  export default defineConfig({
    resolve: {
      dedupe: ['antd', 'rc-select']
    }
  })
  

3. 清理各类缓存 #

缓存可能导致类型关联异常，按以下步骤清理：

• 删除node_modules、package-lock.json/yarn.lock，重新安装依赖
• 删除TypeScript缓存文件tsconfig.tsbuildinfo和.tscache目录
• 重启编辑器，比如VS Code中执行Ctrl+Shift+P → TypeScript: Restart TS Server

4. 优化子项目打包配置 #

如果子项目是作为npm包发布的，避免将antd打包进产物：

• 在子项目package.json中，把antd移到peerDependencies，仅在devDependencies中安装开发版本：

  "peerDependencies": {
    "antd": "^x.x.x"
  },
  "devDependencies": {
    "antd": "^x.x.x"
  }
  

• 配置打包工具（rollup/webpack）时，将antd设为外部依赖，不打包进最终产物

5. 统一导入方式 #

确认主、子项目导入TreeSelect的方式完全一致：

• 不要混用import { TreeSelect } from 'antd'和import TreeSelect from 'antd/es/tree-select'
• 统一使用官方推荐的import { TreeSelect } from 'antd'

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