嵌入自定义React-Native组件库遭遇jest-haste-map依赖冲突问题求助

你遇到的这个Haste模块命名冲突，本质是因为你的组件库united-native-components把react-native当成了常规依赖安装，导致主应用UnitedApp和组件库各自拥有一份react-native副本，而React Native的Haste模块系统会把相同路径的模块识别成同一个名称，从而触发冲突。

要解决这个问题，只需要在组件库的package.json里做两个关键配置，让它像标准NPM包一样共享主应用的依赖：

1. 将react-native设为peerDependencies #

peerDependencies的作用是告诉包管理器：这个组件库依赖的react-native由宿主应用（也就是你的UnitedApp）提供，组件库自己不会单独安装一份副本。这样就能彻底避免重复依赖的问题。

修改组件库的package.json，添加如下配置：

"peerDependencies": {
  "react-native": "^0.60.0" // 替换成你的组件库兼容的React Native版本范围
}

2. 为组件库开发添加devDependencies #

因为peerDependencies不会在你开发组件库时自动安装依赖，所以需要把react-native加到devDependencies里，方便你本地开发和调试组件库：

"devDependencies": {
  "react-native": "^0.60.0"
}

3. 清理并重新安装依赖 #

做完上面的配置后，需要清理现有依赖，确保没有残留的重复包：

• 进入组件库目录，删除node_modules和package-lock.json（或yarn.lock）
• 执行npm install（或yarn install）重新安装组件库的依赖
• 回到主应用UnitedApp目录，同样删除node_modules和锁文件，重新执行安装命令

4. 可选：调整Metro配置（本地链接组件库时） #

如果你是通过npm link或者本地路径引用组件库，可能还需要调整主应用的metro.config.js，确保Metro优先使用主应用的依赖：

const path = require('path');

module.exports = {
  resolver: {
    extraNodeModules: new Proxy({}, {
      get: (target, name) => {
        // 始终从主应用的node_modules加载依赖
        return path.join(process.cwd(), `node_modules/${name}`);
      },
    }),
  },
  watchFolders: [
    // 让Metro监听组件库的文件变化（如果是本地开发）
    path.resolve(__dirname, '../united-native-components'),
  ],
};

这样配置后，你的组件库就会像常规NPM包一样嵌入主应用，不会再出现Haste模块命名冲突的问题了。

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