Metro resolver failed with the latest react-native

[moonjava2005]

Current Behavior

After I migrate to the Nx latest, when I run iOS simulator, I got this error
Now I'm not able to start the app

BUNDLE src/main.tsx

error: Error: Cannot resolve url
at /ABC/node_modules/@nx/react-native/plugins/metro-resolver.js:31:15
at Object.resolve (/ABC/node_modules/react-native/node_modules/metro-resolver/src/resolve.js:47:12)
at ModuleResolver.resolveDependency (/ABC/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:79:31)
at DependencyGraph.resolveDependency (/ABC/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
at Object.resolve (/ABC/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:169:21)
at Graph._resolveDependencies (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
at Graph._processModule (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Graph._addDependency (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
at async Promise.all (index 2)

Then, I tried to install url module, I got another error with error: Error: Cannot resolve http. Finally, I tried to install http but the metro always show error: Error: Cannot resolve http

Expected Behavior

Expected the metro resolver runs smoothly

GitHub Repo

No response

Steps to Reproduce

1. npx nx migrate latest
2. yarn install
3. npx nx migrate --run-migrations

Nx Report

Node   : 18.14.2
   OS     : darwin-arm64
   yarn   : 1.22.19

   nx                 : 16.7.2
   @nx/js             : 16.7.2
   @nx/jest           : 16.7.2
   @nx/linter         : 16.7.2
   @nx/workspace      : 16.7.2
   @nx/detox          : 16.7.2
   @nx/devkit         : 16.7.2
   @nx/eslint-plugin  : 16.7.2
   @nx/nest           : 16.7.2
   @nx/node           : 16.7.2
   @nx/react          : 16.7.2
   @nx/react-native   : 16.7.2
   @nrwl/tao          : 16.7.2
   @nx/web            : 16.7.2
   @nx/webpack        : 16.7.2
   nx-cloud           : 16.4.0-beta.1
   typescript         : 5.1.6

Failure Logs

BUNDLE src/main.tsx

error: Error: Cannot resolve url
at /ABC/node_modules/@nx/react-native/plugins/metro-resolver.js:31:15
at Object.resolve (/ABC/node_modules/react-native/node_modules/metro-resolver/src/resolve.js:47:12)
at ModuleResolver.resolveDependency (/ABC/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:79:31)
at DependencyGraph.resolveDependency (/ABC/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
at Object.resolve (/ABC/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:169:21)
at Graph._resolveDependencies (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
at Graph._processModule (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Graph._addDependency (/ABC/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
at async Promise.all (index 2)

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[toni1703]

I had the same problem too when migrating, did not resolved it!

[jael0x]

Same problem here, may be related to this issue:
React Native Metro: Ignoring packages during dependency resolution #18612

Maybe a patch like this could work for now?
facebook/metro#519 (comment)

Help please!

[airowe]

I'm getting the same error, stopping me from upgrading an entire monorepo

[daviaugustos]

Same issue here!

[airowe]

@moonjava2005 Were you able to find a solution for this?

[Bengejd]

Also encountering this issue...

[MrGru]

I update the metro.config.js with
unstable_enablePackageExports: false
and it works for me

[jpaas]

We're using node.js 18, and for us it is the unstable_enablePackageExports that causes this problem. unstable_enableSymlinks seems to work fine.

[airowe]

Metro can't find any of my third party modules that are symlinked. I tried the above unstable config options, to no avail. Even if I change the reference to the root of my monorepo, the modules still can't be found when building my react-native project.

[alexbalda]

Facing the same issue as well. In my case, turning off unstable_enablePackageExports sends Metro in to an infinite loop. I am blocked from upgrading React Native to the latest version.

[xiongemi]

form the error, i think it is related to facebook/react-native#38025. the suggestion is to comment out unstable_enablePackageExports: true,. i comment out the line unstable_enablePackageExports: true, and it seems to resolve the node.js module. this is my metro.config.js:

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
    blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
    unstable_enableSymlinks: true,
    // unstable_enablePackageExports: true,
  },
};

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // Change this to true to see debugging info.
  // Useful if you have issues resolving modules
  debug: true,
  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
  extensions: [],
  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
  watchFolders: [],
});

[xiongemi]

closing this issue for now

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.