错误：jest-haste-map：Haste 模块命名冲突：答案

【问题标题】：Error: jest-haste-map: Haste module naming collision:错误：jest-haste-map：Haste 模块命名冲突：
【发布时间】：2019-06-04 02:53:09
【问题描述】：

我创建了一个自定义 npm module（将使用 xxx 代替其名称）并使用 npm install 手动链接它。

我非常努力地寻找：

在提出问题之前。如果有人告诉我我的代码或方法有什么问题或我的代码有任何错误，我将不胜感激。

当我运行react-native run-android 时，metro bundler 会引发以下错误

Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules\react-native\package.json collides with E:\cdg-native\CDG\node_modules\react-native\package.json

This error is caused by `hasteImpl` returning the same name for different files.

我的自定义模块package.json是

{
  "name": "react-native-xxx",
  "version": "1.0.0",
  "description": "Library to render xxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react native xxx"
  ],
  "author": "Firdous Nath",
  "license": "ISC",
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "devDependencies": {
    "react": "^16.6.1",
    "react-native": "^0.57.5",
    "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"
  }
}

自定义模块的index.js很简单如下

import React from "react";
import { Text } from "react-native";

export default class XXXView extends React.Component {

    render() {
        return (
            <Text> From custom module </Text>
        );
    }
}

我使用自定义模块的文件是

import React from "react";
import {StyleSheet, View} from "react-native";
import XXXView from "react-native-xxx"
//import {XXXView} from "react-native-xxx" -> I tried this as well

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <XXXView/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f5fcff"
    }
});

我尝试了npm install /absolute/path/to/xxx，它正确链接了模块。正确的意思是我可以在nodemodule 目录中看到react-native-xxx 包。我做了所有可能的方法，但没有任何效果。

我也尝试过，但没有成功

yarn add /absolute/path/to/react-native-xxx
react-native 链接 react-native-xxx
react-native run-android

【问题讨论】：

标签： android react-native npm npm-install yarnpkg

【解决方案1】：

您收到的错误表明您有两个 react-native 依赖项。一个在您的主项目中，一个在您的 xxx 模块中，从而在它们的package.jsons 之间产生冲突。似乎如果您从本地路径安装软件包，它会复制其 node_modules 目录。

由于您在自定义模块的package.json 中已经将react-native 作为对等依赖项，请尝试删除E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules，这应该可以解决冲突。

【讨论】：

感谢您的回复，但只要我运行 npm install node_modules 就会创建。如果我发布包，其他人也会遇到同样的问题。
其实，如果你的自定义模块所依赖的项目中已经存在指定的依赖，它不会将它复制到自己的node_modules文件夹中（至少看起来是这样）。当我在 node modules 中查看我的 react-native dep 时，我发现它的 node_modules 文件夹中有一些 dep，但其中绝大多数都在项目的 modules 文件夹中

【解决方案2】：

在根项目中添加rn-cli.config.js

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
 resolver: {
    blacklistRE: blacklist([
        /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
 },
};

see this issue

希望对你有用

【讨论】：

@luky 你用 Pod 吗？
@zhouDai，那个解决方案对我也不起作用。
@Daniel 你用 Pod 吗？
@zhouDai，是的。
@Daniel add 'post_install do |installer| installer.pods_project.targets.each 做 |target| if target.name == "React" target.remove_from_project end end end' 在 Podfile 的末尾

【解决方案3】：

看起来您有 2 个不同的 react-native 项目文件夹，其中一个依赖于另一个（它被包含为 node_module 依赖项），并且您似乎正在运行服务器启动（“react-native start”）命令库文件夹。

【讨论】：

拯救了我的一天...在我的项目中有另一个 react-native 项目。刚刚删除了不需要的项目并繁荣！