Haste module naming collision: react native app with AWS Service (Amplify Project)

Question

i have started with react native project, earlier was in native code. i wanted to add Amazon Lex so followed below steps from link

https://aws-amplify.github.io/docs/js/interactions

below is my App.js file

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

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

i have just set up amplify library and added interaction for LEX, but started getting below error as i try to run app. before adding was working fine...once Amplify folder got created with back-end error started.....

(node:26180) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision: Duplicate module name: myamplifyproject_cfnlambda_87887b9a Paths: C:\Users\temp\Desktop\myAmplifyProject\amplify\backend\interactions\lex900662fd\src\package.json collides with C:\Users\temp\Desktop\myAmplifyProject\amplify#current-cloud-backend\interactions\lex900662fd\src\package.json

This error is caused by hasteImpl returning the same name for different files. at setModule (C:\Users\temp\Desktop\myAmplifyProject\node_modules\jest-haste-map\build\index.js:569:17) at workerReply (C:\Users\temp\Desktop\myAmplifyProject\node_modules\jest-haste-map\build\index.js:641:9) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 30) ERROR 18:24 (node:26180) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2) (node:26180) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:26180) UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision: Duplicate module name: myamplifyproject_cfnlambda_87887b9a Paths: C:\Users\temp\Desktop\myAmplifyProject\amplify\backend\interactions\lex900662fd\src\package.json collides with C:\Users\temp\Desktop\myAmplifyProject\amplify#current-cloud-backend\interactions\lex900662fd\src\package.json

This error is caused by hasteImpl returning the same name for different files. at setModule (C:\Users\temp\Desktop\myAmplifyProject\node_modules\jest-haste-map\build\index.js:569:17) at workerReply (C:\Users\temp\Desktop\myAmplifyProject\node_modules\jest-haste-map\build\index.js:641:9) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 30) (node:26180) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)

i have used all latest versions for react-native.

i tried below solution but not working how to make react native packager ignore certain directories

i just follwed steps ...where i am going wrong....missing anything.... Please help...this is my first app in react native.... i am actually lost

user2813740 user2813740 · Accepted Answer · 2019-11-25T04:41:12

after lots of sleepless nights and testing different solution i finally able to get through..i am using latest react-native > 0.59 (i guess 0.61) my app already created metro.config.js file at the root directory, one has to edit same.

const blacklist = require('metro-config/src/defaults/blacklist');   // on top

resolver: {
    blacklistRE: blacklist([/#current-cloud-backend\/.*/])         //add within module export  
  }

and i took fresh air...now everything works fine...

please do not create new metro.config.js or rn-cli.config.js. edit present metro.config.js with #current-cloud-backend not backend folder. this is very important. backend will be ignored....

this will help someone in future....as nothing works which ever solutions are given....for latest react native.

Haste module naming collision: react native app with AWS Service (Amplify Project)

1 Answers