自定义React Native npm模块本地引入出现jest-haste-map命名冲突求助

我来帮你搞定这个头疼的命名冲突问题！首先得揪出根源：你的自定义模块react-native-xxx的devDependencies里同时装了react和react-native，而主项目本身也有这两个依赖。Metro打包器扫描时会发现两个同名的react-native模块（主项目的和自定义模块本地的），这就触发了haste-map的命名冲突报错。

下面是一步步的解决步骤：

1. 修改自定义模块的package.json
   你已经在peerDependencies里声明了react和react-native，这步做对了——peerDependencies的作用就是告诉包管理器：「这个模块需要宿主项目提供这些依赖，我自己不用装」。所以直接把devDependencies里的react和react-native删掉，修改后的devDependencies应该是这样：

   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1"
   }
   

2. 清理自定义模块的依赖残留
   删除自定义模块目录下的node_modules文件夹和package-lock.json（如果存在的话），避免旧的依赖文件干扰后续操作。

3. 重新安装本地模块到主项目
   回到主项目目录，重新执行本地模块的安装命令，最好加上--force参数确保覆盖缓存：

   npm install /absolute/path/to/xxx --force
   

   如果你用yarn的话：

   yarn add /absolute/path/to/react-native-xxx --force
   

   另外提一句，react-native link在这里没必要，因为你的模块只是纯JS组件，没有原生代码需要链接。

4. 重置Metro缓存
   Metro的缓存很容易留存旧的依赖信息，必须重置才能生效：

   npx react-native start --reset-cache
   

   等Metro重启完成后，再重新运行你的Android项目：

   npx react-native run-android
   

额外的开发小贴士 #

如果你需要在自定义模块里开发测试，可以用npm link把主项目的react和react-native链接到模块里，这样模块开发时也能复用主项目的依赖，不会再次安装重复的包：

• 在主项目目录运行：

  npm link react react-native
  

• 然后在自定义模块目录运行：

  npm link react react-native
  

另外，建议你把peerDependencies里的版本范围写得更具体一点（比如">=0.57.0 <0.60.0"），而不是用*，这样能避免主项目和模块的依赖版本差异过大导致其他兼容性问题。

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