When trying to start the application, Metro doesn’t compile the React Native app because:
Metro has encountered an error:

Error: Cannot resolve package.json
    at /Users/michaelwijnands/Projects/myapp-frontend-3/node_modules/@nx/react-native/plugins/metro-resolver.js:31:15
    at Object.resolve (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro-resolver/src/resolve.js:32:12)
    at ModuleResolver.resolveDependency (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 0)
    at async visit (/Users/michaelwijnands/Projects/myapp-frontend-3/apps/mobile/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 4)

When setting debug to true in metro.config.js, I notice a lot of errors saying:

[Nx] Unable to resolve with default Metro resolver: @myappname/my-hn/icons
[Nx] Unable to resolve with default resolveRequest: @myappname/my-hn/theme
[Nx] Unable to resolve with default Metro resolver: @myappname/my-hn/theme
[Nx] Unable to resolve with default resolveRequest: @myappname/my-hn/theme
[Nx] Unable to resolve with default Metro resolver: @myappname/my-hn/theme
[Nx] Unable to resolve with default resolveRequest: @myappname/my-hn/icons
[Nx] Unable to resolve with default Metro resolver: @myappname/my-hn/icons
[Nx] Unable to resolve with default resolveRequest: @myappname/my-hn/config
[Nx] Unable to resolve with default Metro resolver: @myappname/my-hn/config

My metro.config.js:

const { withNxMetro } = require('@nx/react-native');
const { workspaceRoot } = require('@nx/devkit');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

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, 'cjs', 'mjs', 'svg', 'json'],
  },
};

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: [path.resolve(__dirname, '../../node_modules'), path.resolve(__dirname, '../../libs/my-hn')],
});

One of the libs, @myappname/my-hn/config, only has 3 small TypeScript files. These files export some string etc, no rocket science or any heavy code at all. All other libs also are TS files.

Steps to Reproduce

1. Create a NX library that works on both React and React Native
2. Upgrade from RN 0.72.8 to 0.73.2 (we also tried 0.74.1 as NX migrate latest does)
3. Start the run-ios or run-android command

Nx Report

Node   : 18.20.2
OS     : darwin-arm64
npm    : 10.5.0

nx                 : 19.5.2
@nx/js             : 19.5.2
@nx/jest           : 19.5.2
@nx/linter         : 19.5.2
@nx/eslint         : 19.5.2
@nx/workspace      : 19.5.2
@nx/angular        : 19.5.2
@nx/detox          : 19.5.2
@nx/devkit         : 19.5.2
@nx/eslint-plugin  : 19.5.2
@nx/express        : 19.5.2
@nx/node           : 19.5.2
@nx/react          : 19.5.2
@nx/react-native   : 19.5.2
@nrwl/tao          : 19.5.2
@nx/web            : 19.5.2
@nx/webpack        : 19.5.2
typescript         : 5.0.4
---------------------------------------
Community plugins:
@ionic/angular              : 6.7.5
@maskito/angular            : 1.9.0
@nguniversal/builders       : 16.2.0
@nguniversal/express-engine : 16.2.0
@nxext/capacitor            : 18.0.4
apollo-angular              : 5.0.2
ngx-bootstrap               : 11.0.2

Additional Information

Yes, we also have an Angular app in our repo as we are currently migrating from Angular (web-app) with an Ionic app (mobile) to React and React Native.