Metro unable to resolve nx libraries after upgrade from RN 0.72.8

michaelwijnands commented 1 month ago

Current Behavior

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.

Expected Behavior

I'd expect the application to build fine after upgrading React Native and changing the code as suggested by React Native Upgrade tool.

GitHub Repo

No response

Steps to Reproduce

Create a NX library that works on both React and React Native
Upgrade from RN 0.72.8 to 0.73.2 (we also tried 0.74.1 as NX migrate latest does)
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

Failure Logs

No response

Package Manager Version

No response

Operating System

[X] macOS
[ ] Linux
[ ] Windows
[ ] Other (Please specify)

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.

xiongemi commented 1 month ago

i think default watchFolders will watch node_modules folder and libararies as well, maybe try to change the the watchFolders to be empty array to see whether that would fix the issue? watchFolders: [],

michaelwijnands commented 4 weeks ago

@xiongemi Thanks for your reply. By default we have watchFolders: [], the above was to try if Metro would work. So unfortunately watchfolders: [] doesn't help.

xiongemi commented 2 weeks ago

do you have a link to your repo?

nrwl / nx