fix: resolver.resolveRequest is always undefined

[ammarahm-ed]

Summary:

I just upgraded to react-native 0.72.0 in our project and found out that resolver.resolveRequest from the project config is always getting overridden by the getOverrideConfig function. The PR helps fix the issue so that we are able to define our custom resolveRequest functions.

For example here's the metro.config.js file of our project where we are using resolveRequest. This was working in RN 0.71.11 but stopped working after upgrading to 0.72.0.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
const config = {
  ...
};
const mergedConfig = mergeConfig(getDefaultConfig(__dirname), config);

mergedConfig.resolver = {
  ...
  resolveRequest: (context, moduleName, platform) => {
    if (moduleName ==='react') {
    console.log("LOADING REACT!");
      // Resolve react package from mobile app's node_modules folder always.
      return {
        filePath: path.resolve(path.join(__dirname, '../node_modules', "react","index.js")),
        type: 'sourceFile',
      };
    }
    return context.resolveRequest(context, moduleName, platform);
  }
};

module.exports = mergedConfig;

The problematic code is here:

cli/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

Lines 32 to 36 in a1cc798

	resolveRequest:
	outOfTreePlatforms.length === 0
	? undefined
	: reactNativePlatformResolver(
	outOfTreePlatforms.reduce<{[platform: string]: string}>(

and then the undefined value replaces the project config value for resolveConfig here:

cli/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

Lines 120 to 123 in a1cc798

	return mergeConfig(
	await loadConfig({cwd: ctx.root, ...options}),
	overrideConfig,
	);

Test Plan:

To test the issue, create a new react-native 0.72.0 project & replace contents of metro.config.js with the following:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const mergedConfig = mergeConfig(getDefaultConfig(__dirname),{});

mergedConfig.resolver = {
  resolveRequest: (context, moduleName, platform) => {

    console.log("Resolve Request Received"):

    return context.resolveRequest(context, moduleName, platform);
  }
};

module.exports = mergedConfig;

Without the fix "Resolve Request Received" never get's logged since resolver.resolveRequest is always undefined in the final config used by metro bundler.

[huntie]

LGTM, thanks :)

@thymikee Can we cherry pick this to 11.x as well? We should distribute this fix to users in the next React Native minor release.

[szymonrybczak]

Cool, thanks! Tests are failing, because yesterday was released 0.72 - in snapshots we still have 0.71, so no worries :)