Cannot open Hermes JS Debugger on adding metro-config package to address - "metro-file-map: Haste module naming collision" due to amplify/#current-cloud-backend having same files as amplify/backend.

[yashBrahma]

Do you want to request a feature or report a bug?
I want to report bug

What is the current behavior?

Describe the bug

Getting the below error on npx expo start. fixed using metro-config but js debugger is failing to launch after installing metro-config latest version(0.79.1)

metro-file-map: Haste module naming collision: wildAuthPostConfirmation
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>/amplify/#current-cloud-backend/function/wildflowerAuthPostConfirmation/src/package.json
    * <rootDir>/amplify/backend/function/wildflowerAuthPostConfirmation/src/package.json

Failed to construct transformer:  DuplicateError: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:450:17)
    at workerReply (/Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:507:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 59371)
    at async HasteMap._applyFileDelta (/Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:672:7)
    at async /Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:327:9 {
  mockPath1: 'amplify/#current-cloud-backend/function/wildAuthPostConfirmation/src/package.json',
  mockPath2: 'amplify/backend/function/wildAuthPostConfirmation/src/package.json'
}
Error: Duplicated files or mocks. Please check the console for more info
    at setModule (/Users/tt/git-repos/wild.0/node_modules/metro-file-map/src/index.js:450:17)
    at workerReply (/Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:507:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 59371)
    at async HasteMap._applyFileDelta (/Users/tt/git-repos/wildfirefly1.0/node_modules/metro-file-map/src/index.js:672:7)
    at async /Users/tt/git-repos/wild1.0/node_modules/metro-file-map/src/index.js:327:9

So to fix it, adding metro-config(version 0.79.1) will fix the issue but will prevent Hermes JS Debugger from launching the debugger as there is nothing published in /json/list

Opening JavaScript inspector in the browser...
FetchError: invalid json response body at http://192.168.29.218:8081/json/list reason: Unexpected token < in JSON at position 0
FetchError: invalid json response body at http://192.168.29.218:8081/json/list reason: Unexpected token < in JSON at position 0
    at /Users/tt/git-repo1/native/wildfirefly1.0/node_modules/node-fetch/lib/index.js:273:32
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.queryAllInspectorAppsAsync (/Users/tt/git-repo1/native/wild1.0/node_modules/@expo/dev-server/build/JsInspector.js:53:30)
    at async DevServerManagerActions.openJsInspectorAsync (/Users/tt/git-repo1/native/wild1.0/node_modules/@expo/cli/build/src/start/interface/interactiveActions.js:94:22)
    at async KeyPressHandler.handleKeypress (/Users/tt/git-repo1/native/wild1.0/node_modules/@expo/cli/build/src/start/interface/KeyPressHandler.js:43:17)

Below is what is returned when amplify is NOT used the /json/list returns the list of debuggable apps

Working - http://192.168.29.8:8081/json/list

[
    {
        "id": "0-2",
        "description": "host.exp.Exponent",
        "title": "Reanimated Runtime",
        "faviconUrl": "https://reactjs.org/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D2",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=2",
        "vm": "Hermes",
        "deviceName": "iPhone 15 Pro Max"
    },
    {
        "id": "0-1",
        "description": "host.exp.Exponent",
        "title": "Hermes ABI49_0_0React Native",
        "faviconUrl": "https://reactjs.org/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=1",
        "vm": "Hermes",
        "deviceName": "iPhone 15 Pro Max"
    },
    {
        "id": "0--1",
        "description": "host.exp.Exponent",
        "title": "React Native Experimental (Improved Chrome Reloads)",
        "faviconUrl": "https://reactjs.org/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=-1",
        "vm": "don't use",
        "deviceName": "iPhone 15 Pro Max"
    }
]

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

Reproduction steps

1. Create a react native app using yarn create expo-app AwesomeProject
2. Create an amplify project. Add some resources
3. Start the expo app npx expo start
4. It will give an error - metro-file-map: Haste module naming collision: wildAuthPostConfirmation as mentioned above.
5. Fix by installing metro-config package version(0.79.1 latest) This will fix the above error(Haste module naming collision)
6. Now start the expo app again and try to launch the JS debugger it will give an error - FetchError: invalid json response body at http://192.168.29.218:8081/json/list reason: Unexpected token < in JSON at position 0

What is the expected behavior?
Should ignore the amplify/#current-cloud-backend and js debugger should get launched

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version, and operating system.

System:
    OS: macOS 14.0
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 553.24 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 17.0
  npmPackages:
    @aws-amplify/ui-react-native: ^1.2.27 => 1.2.28 
    @babel/core: ^7.23.0 => 7.23.0 
    @babel/preset-env: ^7.22.20 => 7.22.20 
    @babel/preset-typescript: ^7.23.0 => 7.23.0 
    @emotion/cache: ^11.11.0 => 11.11.0 
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @expo/vector-icons: ^13.0.0 => 13.0.0 
    @react-native-async-storage/async-storage: 1.18.2 => 1.18.2 
    @react-native-community/netinfo: 9.3.10 => 9.3.10 
    @react-native-masked-view/masked-view: 0.2.9 => 0.2.9 
    @react-navigation/bottom-tabs: ^6.4.3 => 6.5.9 
    @react-navigation/compat: ^5.1.25 => 5.3.20 
    @react-navigation/drawer: 6.6.3 => 6.6.3 
    @react-navigation/elements: * => 1.3.19 
    @react-navigation/native: ^6.0.10 => 6.1.8 
    @react-navigation/stack: ^6.2.1 => 6.3.18 
    @types/jest: ^29.5.5 => 29.5.5 
    @types/react: ^18.2.21 => 18.2.25 
    @types/underscore.string: ^0.0.39 => 0.0.39 
    @types/uuid: ^9.0.3 => 9.0.5 
    HelloWorld:  0.0.1 
    amazon-cognito-identity-js: ^6.3.5 => 6.3.6 
    amazon-cognito-identity-js/internals:  undefined ()
    aws-amplify: ^5.3.10 => 5.3.11 
    babel-jest: ^29.7.0 => 29.7.0 (27.5.1)
    babel-plugin-module-resolver: ^5.0.0 => 5.0.0 
    babel-preset-expo: ^9.3.0 => 9.5.2 
    color: * => 4.2.3 (3.2.1)
    cross-env: ^7.0.3 => 7.0.3 
    expo: ^49.0.8 => 49.0.13 
    expo-asset: ~8.10.1 => 8.10.1 
    expo-constants: ~14.4.2 => 14.4.2 
    expo-font: ~11.4.0 => 11.4.0 
    expo-keep-awake: ~12.3.0 => 12.3.0 
    expo-linear-gradient: ~12.3.0 => 12.3.0 
    expo-splash-screen: ^0.20.5 => 0.20.5 
    expo-status-bar: ~1.6.0 => 1.6.0 
    expo-updates: ~0.18.16 => 0.18.16 
    formik: ^2.4.4 => 2.4.5 
    galio-framework: ^0.8.0 => 0.8.0 
    jest: ^29.7.0 => 29.7.0 (27.5.1)
    jest-expo: ^49.0.0 => 49.0.0 
    metro-config: ^0.79.1 => 0.79.1 (0.76.8)
    moment: ^2.29.4 => 2.29.4 
    phone: ^3.1.40 => 3.1.41 
    react: ^18.2.0 => 18.2.0 
    react-bootstrap-sweetalert: ^5.2.0 => 5.2.0 
    react-country-flag: ^3.1.0 => 3.1.0 
    react-lottie: ^1.2.3 => 1.2.3 
    react-native: ^0.72.5 => 0.72.5 
    react-native-dropdown-picker: ^5.4.2 => 5.4.6 
    react-native-gesture-handler: ~2.12.1 => 2.12.1 
    react-native-modal-dropdown: 1.0.2 => 1.0.2 
    react-native-modal-dropdown-demo:  0.6.2 
    react-native-paper: 5.7.0 => 5.7.0 
    react-native-reanimated: 3.3.0 => 3.3.0 
    react-native-safe-area-context: 4.6.3 => 4.6.3 
    react-native-screens: ~3.22.0 => 3.22.1 
    react-native-vector-icons: * => 10.0.0 
    react-scripts: ^5.0.1 => 5.0.1 
    react-table: ^7.8.0 => 7.8.0 
    ts-jest: ^29.1.1 => 29.1.1 
    typescript: ^5.1.3 => 5.2.2 
    underscore.string: ^3.3.6 => 3.3.6 
    uuid: ^9.0.1 => 9.0.1 (3.4.0, 8.3.2, 7.0.3)
    xlsx: ^0.18.5 => 0.18.5 
    yup: 0.32.11 => 0.32.11 
    yup-phone-lite: 2.0.1 => 2.0.1 
  npmGlobalPackages:
    corepack: 0.18.0
    npm: 9.6.7
    yarn: 1.22.19```