Metro has encountered an error: Cannot resolve

[denysoleksiienko]

Current Behavior

I have updated my project to use Nx version 21 and React Native 0.79.2. After the update, I can’t start the RN project.

Then I run the target command and run Build in XCode

"start": {
  "executor": "@nx/react-native:start",
  "dependsOn": [],
  "options": {
     "port": 8081,
     "resetCache": true
  }
}

Metro has encountered an error: Cannot resolve ./index: /Users/denys/projects/cashalot-app/node_modules/@nx/react-native/plugins/metro-resolver.js (31:15) 29 |             console.log(pc.red(`[Nx] Unable to resolve with any resolver: ${realModuleName}`)); 30 |         } > 31 |         throw new Error(`Cannot resolve ${pc.bold(realModuleName)}`); |               ^ 32 |     }; 33 | } 34 | function resolveRequestFromContext(resolveRequest, context, realModuleName, platform, debug) {

My metro config:

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withSentryConfig } = require('@sentry/react-native/metro');
const path = require('path');
const {
  wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
  watchFolders: [path.resolve(__dirname, '../../node_modules')],
};

/**
 * Async Metro config setup to support Nx + Reanimated + Sentry
 */
module.exports = async () => {
  const nxMetroConfig = await withNxMetro(
    wrapWithReanimatedMetroConfig(mergeConfig(defaultConfig, customConfig)),
    {
      // Change this to true to see debugging info.
      // Useful if you have issues resolving modules
      debug: false,
      // 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: [],
    },
  );

  return withSentryConfig(nxMetroConfig);
};

deps:

"react": "^19.0.0",
"react-native": "0.79.2",
"nx": "21.1.2",
"@nx/devkit": "21.1.2",
"@nx/eslint-plugin": "^21.1.2",
"@nx/jest": "21.1.2",
"@nx/js": "21.1.2",
"@nx/linter": "19.8.4",
"@nx/next": "21.1.2",
"@nx/react": "21.1.2",
"@nx/react-native": "21.1.2",
"@nx/web": "21.1.2",
"@nx/webpack": "21.1.2",
"@nx/workspace": "21.1.2",

Expected Behavior

Should build the RN project

GitHub Repo

No response

Steps to Reproduce

1. update NX "@nx/react-native": "20.6.1" to "@nx/react-native": "21.1.2"
2. update react-native to 0.79.2

Nx Report

-

Failure Logs

Package Manager Version

No response

Operating System

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

Additional Information

No response

[broncha]

This exact issue was happening to me. If you, like me, used the upgrade helper and converted AppDelegate.mm to AppDelegate.swift, by just copying pasting the diff, please check if this line is correct

#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "src/main")
#else

In a react-native bare project this would be

#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else

But in @nx/react-native index should actually be src/main. That solved the issue for me

[denysoleksiienko]

@broncha Yeah, you are right. I was always confused that NX used main by default instead of index