Not resolving browser and react-native fields form package.json

[wSedlacek]

Current Behavior

The resolve does not appear to use the resolve fields from metro.config.js, ie resolving to the main field when the configuration is ['react-native', 'browser', 'main']

Expected Behavior

The resolve fields in the metro.config.js to be respected.

Steps to Reproduce

Try to import cross-fetch into a @nrwl/react-native project.

The issue seems to be introduced when this was made the default for even npm and yarn package managers.

nx/packages/react-native/plugins/metro-resolver.ts

Lines 34 to 42 in cc4e8c1

	resolvedPath = pnpmResolver(
	extensions,
	context,
	realModuleName,
	moduleName
	);
	if (resolvedPath) {
	return resolvedPath;
	}

I attempted to pass through the mainFields from the context but that didn't resolve the issue.
However removing these lines did resolve the issue.

Failure Logs

error Unable to resolve module node:https from node_modules/node-fetch/src/index.js: node:https could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
   8 |
   9 | import http from 'node:http';
> 10 | import https from 'node:https';
     |                    ^
  11 | import zlib from 'node:zlib';
  12 | import Stream, {PassThrough, pipeline as pump} from 'node:stream';
  13 | import {Buffer} from 'node:buffer';. Run CLI with --verbose flag for more details.
Error: Unable to resolve module node:https from node_modules/node-fetch/src/index.js: node:https could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
   8 |
   9 | import http from 'node:http';
> 10 | import https from 'node:https';
     |                    ^
  11 | import zlib from 'node:zlib';
  12 | import Stream, {PassThrough, pipeline as pump} from 'node:stream';
  13 | import {Buffer} from 'node:buffer';
    at ModuleResolver.resolveDependency (node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:191:15)
    at DependencyGraph.resolveDependency (node_modules/metro/src/node-haste/DependencyGraph.js:353:43)
    at Object.resolve (node_modules/metro/src/lib/transformHelpers.js:271:42)
    at resolve (node_modules/metro/src/DeltaBundler/traverseDependencies.js:571:33)
    at node_modules/metro/src/DeltaBundler/traverseDependencies.js:587:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (node_modules/metro/src/DeltaBundler/traverseDependencies.js:586:33)
    at node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

Environment

 >  NX   Report complete - copy this into the issue template

   Node : 14.19.0
   OS   : darwin x64
   npm  : 8.5.5
   
   nx : 13.10.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 13.10.0
   @nrwl/detox : 13.10.0
   @nrwl/devkit : 13.10.0
   @nrwl/eslint-plugin-nx : 13.10.0
   @nrwl/express : Not Found
   @nrwl/jest : 13.10.0
   @nrwl/js : 13.10.0
   @nrwl/linter : 13.10.0
   @nrwl/nest : 13.10.0
   @nrwl/next : Not Found
   @nrwl/node : 13.10.0
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : 13.10.0
   @nrwl/react : 13.10.0
   @nrwl/react-native : 13.10.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 13.10.0
   @nrwl/workspace : 13.10.0
   typescript : 4.5.5
   rxjs : 7.5.2
   ---------------------------------------
   Community plugins:
         @brandingbrand/flagship-nx: 11.48.0
         @brandingbrand/github-nx: 11.48.0
         @brandingbrand/orchestrate-nx: 11.48.0
         @brandingbrand/shipit-nx: 11.48.0
         @jscutlery/semver: 2.21.6
         @nx-tools/nx-docker: 2.3.0
         ngx-deploy-npm: 3.1.6

[wSedlacek]

So I got a chance to test these changes today, and unfortunately I am still having this issue.
When I have the || pnpmResolver(extensions, context, realModuleName, moduleName) the issue occurs.
When I remove this expression the issue does not occur.

When adding some debug points I notice that when I remove the expression as I describe above, basically everything fails to resolve.
Even something as simple as react or react-native.
This appears to be causing this different code path to execute here:
https://github.com/facebook/metro/blob/277ca61d32ce005898e386e75eda1b1ba1b6ce6a/packages/metro-resolver/src/resolve.js#L98-L134

I will note that I am testing on 0.59.0 of the metro resolver, so that may have some impact.
I will see if I can create a minimal recreation with a later version.

[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.