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]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

 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

Describe the bug

Getting the below error on npx expo start

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"
    }
]

Expected behavior

Should ignore the amplify/#current-cloud-backend and js debugger should get launched

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 0and

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @yashBrahma 👋. Would you mind sharing what is in your metro.config.js? This naming collision looks similar to issues within the CLI repo with some potential workarounds here and here, but it sounds like you've already tried to make updates there and still run into an issue.

[yashBrahma]

Hi @cwomack. Thank you for responding.

I fixed the naming collision issue by installing the metro-config(version 0.79.1 latest) package. For this latest version, we don't need to add metro.config.js the package will take care of it. However, after installing this package the JS debugger was failing to launch.

So I removed the metro-config(version 0.79.1 latest) package and added a metro.config.js file with the below code -

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = {
    ...config,
    resolver: {
        ...config.resolver,
        blockList: [config.resolver.blockList, /(\/amplify\/.*)$/],
    },
};

This worked for me without the naming collision issue and the JS debugger is also launching without any issue.
The above code will fix the naming collision issue without the metro-config package.

Ref - ((https://stackoverflow.com/questions/41813211/how-to-make-metro-react-native-packager-ignore-certain-directories#:~:text=1-,For%20Expo%3A,-const%20%7B%20getDefaultConfig%20%7D%20%3D%20require))