Yarn workspaces expo amplify, Error: resolveDependencies: Found duplicate dependency key 'undefined' in

[alifa20]

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

What is the current behaviour?
The app shows red box related to metro

If the current behaviour is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.
I have setup Yarn workspaces mono repo with expo apps in /apps folder.
I also have amplify in the /packages folder.
By nature when I do amplify pull it gets an exact copy of what is up in AWS and hence I'll end up package.json with same name throughout the code base. Yarn workspace is not happy with multiple package.json files with the same name field.

I am using the following code (blacklistRE) to ignore unwanted source code to be considered in metro

const { getDefaultConfig } = require("expo/metro-config");
const path = require("path");
const exclusionList = require("metro-config/src/defaults/exclusionList");

const workspaceRoot = path.resolve(__dirname, "../..");
const projectRoot = __dirname;
const config = getDefaultConfig(projectRoot);
config.watchFolders = [workspaceRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, "node_modules"),
  path.resolve(workspaceRoot, "node_modules"),
];

module.exports = {
  ...config,
  resolver: {
    ...config.resolver,
    blacklistRE: exclusionList([/amplify\/#current-cloud-backend\/.*/]),
  },
};

The code works just fine with "metro-config": "0.71.3" but when I upgrade to "metro-config": "0.72.0" I get the error as attached.

iOS Bundling failed 65ms
error: Error: resolveDependencies: Found duplicate dependency key 'undefined'

The command I am running is:
yarn workspace MyApp expo run:ios

Since there's not much doc around mono repos and metro configs I thought I share my findings and in case that's not a bug will be great if you guys can let me know what needs to be changed for the new version to work.

What is the expected behavior?
No error

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
OS: MacOs Montery
npm: 8.13.2
yarn: 1.22.19
"metro-config": "0.72.0"

[janpe]

I'm having this exact same problem. Wondering if it could be caused by multiple metro and metro-config versions.

[alifa20]

If I understood you correctly, do you mean updating metro-config versions for all projects in /packages folder?

If so, I am not sure really. I created a test repo, and one package and still have the same issue.
In my project, I have multiple packages and I made sure I updated metro-config in all those packages and still same problem.

[adbs1]

@alifa20 @janpe, did you find any way forward? I have the same issue errors using the following. I believe rn uses 0.72.2.

"dependencies": {
"react": "18.1.0",
"react-native": "0.70.0",
"react-native-background-fetch": "^4.1.2"
},

[SmartMointy]

@adbs1 I think the issue is mismatch dependency versions, with yarn v3 there is a plugin called workspace-tools which allows to install dependencies of only one workspace (you can also just copy the package out of the monorepo) and that 'solves' the problem.

So to find out what dependency that is I created a custom MetroResolver which console.log(moduleName) to see where it crashes. In my case it prints out react-native and after that react/jsx-runtime. But that confuses me more, because all packages use the same react-native and react version, so...?

After trying a few things, the error disappeared after I removed some dependencies of multiple packages.

[Aleksandriukas]

In my case there was an issue with 2 versions of metro. I have found it by running npm ls metro:

So, removing the duplicated one resolved the issue.

[esWeborg]

I used to have 2 versions of metro, but removed the library that required it and still lo luck (after clearing any possible cache from watchman to metro and so on).

First: it wasn't an issue until I had to update metro to 0.72
Second: I am puzzled by the undefined in "Found duplicate dependency key 'undefined' in".

Anyone has any insight on this?
Additionally I will need to add again the library depending on a different metro version, so what are my chances of fixing this? --legacy-peer-deps it's itchy and still didn't solve my problem (--force didn't help either).

I have even tried to fork that library repo and changed it's package.json but not cake.

[robhogan]

We've only seen this with multiple Metro installations (specifically, metro@>=0.72.0 and metro@<0.72.0).

This is due to a new "dependency key", added in #835. This is required by newer Metro versions, but not supplied by older versions of the collectDependencies worker, which is required by metro-transform-worker and can end up resolving to a different version of Metro.

First: it wasn't an issue until I had to update metro to 0.72

This might hint at the problem. Usually (ie, in a React Native context) metro is indirect dependency via @react-native-community/cli, and shouldn't normally be listed in your project's package.json.

Even if you don't have an explicit metro dependency it is still sometimes possible to get multiple versions (see discussion) - if that happens, deleting your lockfile and node_modules and reinstalling should help.

Running npm ls metro or yarn why metro should tell you conclusively if you have multiple versions installed in your project, and how. If you do only have one version installed, please reopen this issue and if possible include a version of your yarn.lock or a minimal repro.

[esWeborg]

The case is closed for me but only after deleting the library that contained a peerDependencies entry for metro-config v0.58 AND any mention of metro in my package.json (I had one, but removing that was not enough)
Luckily I had a workaround for UI-kittens at https://akveo.github.io/react-native-ui-kitten/docs/design-system/customize-mapping#merge-mappings

I want to highlight that the metro dependency was in peerDependencies and I did run npm install with --legacy-peer-deps that should not create duplicates. I am going to blame the cache even if I spent hours clearing it all over the place.

Thanks again @robhogan the info you provided led me to the only possible conclusions: duplicates are not allowed and that's it. I then spent time finding and killing them all (note that npm ls metro was a bit misleading when duplicates in peerDependencies were set to same version).

On a final note I'd like to share a 1liner npm script I used a lot in fixing this issue. Hope it helps others:

"scripts":
    ...
    "cache:clear": "watchman watch-del-all && rm package-lock.json && rm -rf node_modules && npm install --legacy-peer-deps && rm -rf /tmp/metro-* && npm run start -- --reset-cache"

[manishmobmaxime]

I am getting same issue with react-native version 0.70.4
@Aleksandriukas If it solved by remove duplicate metro version, then how you have done that

[PradeepThite]

#857 (comment)
Refer to above. Explained in better way.

Step 1: Uninstall @react-native-community/cli@7.0.4
Step 2: Install version from react-native package that is @react-native-community/cli@10.0.0 (Refer below image for versions)

For understand please check the image below

[Siddharth-Gautam0]

All my metro versions are in sync, but still getting the same error

npm ls metro:

Below is my package.json

"dependencies": {
"@formatjs/intl-datetimeformat": "4.5.1",
"@formatjs/intl-displaynames": "5.4.1",
"@formatjs/intl-getcanonicallocales": "1.9.0",
"@formatjs/intl-listformat": "6.5.1",
"@formatjs/intl-locale": "2.4.44",
"@formatjs/intl-numberformat": "7.4.1",
"@formatjs/intl-pluralrules": "4.3.1",
"@formatjs/intl-relativetimeformat": "9.5.1",
"@gorhom/bottom-sheet": "4.4.3",
"@react-native-async-storage/async-storage": "1.15.11",
"@react-native-community/cli": "9.3.2",
"@react-native-community/datetimepicker": "5.1.0",
"@react-native-firebase/analytics": "14.3.1",
"@react-native-firebase/app": "14.3.1",
"@react-native-firebase/crashlytics": "14.2.4",
"@react-navigation/elements": "1.3.1",
"@react-navigation/native": "6.0.8",
"@react-navigation/native-stack": "6.6.2",
"@types/node": "12.0.0",
"@types/react": "17.0.0",
"axios": "0.24.0",
"flat": "5.0.2",
"form-data": "3.0.1",
"google-libphonenumber": "3.2.26",
"i18n-js": "3.8.0",
"lodash": "4.17.21",
"metro-resolver": "0.72.3",
"moment": "2.29.4",
"moment-timezone": "0.5.32",
"react": "18.1.0",
"react-hook-form": "7.27.0",
"react-native": "0.70.9",
"react-native-autoheight-webview": "1.6.5",
"react-native-document-picker": "8.1.1",
"react-native-encrypted-storage": "4.0.2",
"react-native-fs": "2.16.6",
"react-native-gesture-handler": "1.10.3",
"react-native-image-resizer": "1.4.0",
"react-native-localize": "2.1.5",
"react-native-maps": "^1.3.2",
"react-native-google-places-autocomplete": "1.9.0",
"react-native-otp-verify": "1.0.5",
"react-native-paper": "4.10.0",
"react-native-paper-dates": "0.8.6",
"react-native-reanimated": "2.11.0",
"react-native-render-html": "^6.3.4",
"react-native-responsive-screen": "1.4.1",
"react-native-restart": "0.0.24",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "3.7.0",
"react-native-svg": "12.3.0",
"react-native-vector-icons": "9.2.0",
"react-native-webview": "11.23.1",
"react-native-pager-view": "5.4.24",
"react-native-tab-view": "3.3.4",
"reflect-metadata": "0.1.13",
"rxjs": "7.4.0",
"typedi": "0.10.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "^7.16.4",
"@babel/plugin-proposal-private-methods": "^7.16.11",
"@babel/plugin-proposal-private-property-in-object": "^7.16.7",
"@babel/plugin-transform-modules-commonjs": "^7.16.7",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@react-native-community/netinfo": "4.7.0",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react-native": "^9.0.0",
"@types/flat": "^5.0.2",
"@types/google-libphonenumber": "^7.4.23",
"@types/i18n-js": "^3.8.2",
"@types/jest": "^27.5.2",
"@types/lodash": "^4.14.177",
"@types/react-native": "^0.66.4",
"@types/react-native-vector-icons": "^6.4.10",
"@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"babel-jest": "^27.4.6",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"eslint": "^7.14.0",
"jest": "^27.4.7",
"metro-config": "0.72.3",
"metro-react-native-babel-preset": "^0.72.3",
"minimist": "^1.2.5",
"react-native-codegen": "^0.0.13",
"react-native-svg-transformer": "^1.0.0",
"react-test-renderer": "18.1.0",
"ts-jest": "^27.1.3",
"typescript": "^4.4.4"
},
"resolutions": {
"@types/react": "^17",
"@babel/traverse": "7.20.1",
"ansi-regex": "3.0.1",
"node-fetch": "2.6.7",
"xml2js": "0.5.0",
"minimist": "0.2.4"
}

But I'm still getting this error:

`
error: Error: resolveDependencies: Found duplicate dependency key 'undefined' in /Users/Desktop/Project/index.js
at resolveDependencies (/Users/Desktop/MRM3/node_modules/metro/src/DeltaBundler/graphOperations.js:484:13)
at processModule (/Users/Desktop/Project/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
at async traverseDependenciesForSingleFile (/Users/Desktop/Project/node_modules/metro/src/DeltaBundler/graphOperations.js:221:3)
at async Promise.all (index 0)
at async initialTraverseDependencies (/Users/Desktop/Project/node_modules/metro/src/DeltaBundler/graphOperations.js:204:3)
at async DeltaCalculator._getChangedDependencies (/Users/Desktop/Project/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:208:25)
at async DeltaCalculator.getDelta (/Users/Desktop/Project/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:90:16)
at async DeltaBundler.buildGraph (/Users/Desktop/MRM3/node_modules/metro/src/DeltaBundler.js:56:5)
at async IncrementalBundler.buildGraphForEntries (/Users/Desktop/Project/node_modules/metro/src/IncrementalBundler.js:81:19)
at async IncrementalBundler.buildGraph (/Users/Desktop/Project/node_modules/metro/src/IncrementalBundler.js:161:19)

`

[jpatidar30]

@Siddharth-Gautam0 I am also facing the same issue.

PS: I am using a bare expo app.

[Sudhanshujain0109]

[stderr] - error resolveDependencies: Found duplicate dependency key 'undefined' in /home/expo/workingdir/build/index.js.

This error was coming of two metro version running in the app.

i removed metro@0.65.0 from the packeg.json and reinstall to metro@0.70.4. And rebuild the app again on expo development server. It worked 🎉🎊🎉🎉

[jeafgilbert]

This works for me:

• Remove "metro-config" from package.json
• yarn install again
• cd ios && pod install --repo-update && cd ..
• yarn start --reset-cache
• (other terminal) yarn ios

[JayZhouzzj]

To fix metro version, try something like this

{
  {
    "resolutions": {
      "metro": "0.76.0",
      "metro-resolver": "0.76.0"
    }
  }
}

in package.json

[JulioCVaz]

@Aleksandriukas Hey dude! thank you for this suggestion. You saved a lot of my time.