React Native Metro: Ignoring packages during dependency resolution

[enchorb]

Description

Certain packages need to be ignored during dependency resolution for Metro (http, https, zlib), depending on your Node version.

The solution outlined here facebook/metro#519, does not work with Nx, I'm guessing because of merging it into the Nx Metro config which overrides it.

Motivation

Needed in some instances to build the app successfully

[atarek12]

I am facing the same problem while trying to install axios package. here is a quick reproduction repo

I have used these commands to build the repo

npx create-nx-workspace --preset=expo
npm install axios
yarn nx start undefiend

and then found this error error: Error: Cannot resolve http and it is being resolved when running yarn add [email protected]

to reproduce:

git clone https://github.com/atarek12/nx-expo-axios
cd nx-expo-axios
yarn install
yarn nx start undefiend

[lewisd1996]

Facing the same issue as @enchorb and @atarek12, sometimes it's http that cannot be resolved and sometimes http2 but the problems the same

[xiongemi]

in your app's metro.config.js, how about comment out the line: unstable_enablePackageExports: true,?

[david-gettins]

@xiongemi Unfortunately that option causes issues with AWS Amplify. See here. It has already been disabled.

[xiongemi]

@david-gettins i think you can do something like this to override nx's resolve request:

const path = require("path");

const blacklistedModules = ["https", "http", "zlib"];

const nxConfig = withNxMetro(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: [],
});

module.exports = mergeConfig(nxConfig, {
  resolve: {
    resolveRequest: (context, realModuleName, platform, moduleName) => {
      if (blacklistedModules.includes(moduleName)) {
        return {
          filePath: path.resolve(__dirname + "/src/shim-module.js"),
          type: "sourceFile"
        };
      } else {
        return nxConfig.resolve.resolveRequest(
          context, realModuleName, platform
        );
      }
    }
  }
})

[lewisd1996]

Hi @xiongemi thank you for your suggestion, unfortunately it hasn't worked for me, this is the error specifically:

error: Error: Cannot resolve http at /Users/lewis/Documents/GitHub/information-to-live-by/node_modules/@nx/react-native/plugins/metro-resolver.js:30:15

here is the entire metro config:

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const path = require('path');

const blacklistedModules = ['https', 'http', 'zlib'];

/**
 * 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, 'svg'],
    blockList: exclusionList([
      /^(?!.*node_modules).*\/dist\/.*/,
      /(.*(\.github).*)/,
    ]),
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: false,
    extraNodeModules: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
    },
  },
};

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {  
  debug: false,
  extensions: [],  
  watchFolders: [],
  resolve: {
    resolveRequest: (context, realModuleName, platform, moduleName) => {
      if (blacklistedModules.includes(moduleName)) {
        return {
          filePath: path.resolve(__dirname + '/src/shim-module.js'),
          type: 'sourceFile',
        };
      } else {
        return customConfig.resolve.resolveRequest(
          context,
          realModuleName,
          platform,
        );
      }
    },
  },
});

[xiongemi]

@lewisd1996 how about the nx config like

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');
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, 'svg'],
    blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
};

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: [],
}).then((nxConfig) => {
  const blacklistedModules = ['https', 'http', 'zlib'];
  return mergeConfig(nxConfig, {
    resolver: {
      resolveRequest: (context, realModuleName, platform, moduleName) => {
        if (blacklistedModules.includes(moduleName)) {
          return {
            filePath: path.resolve(__dirname + '/src/shim-module.js'),
            type: 'sourceFile',
          };
        } else {
          return nxConfig.resolver.resolveRequest(
            context,
            realModuleName,
            platform
          );
        }
      },
    },
  });
});

[lewisd1996]

Hi @xiongemi thank you for getting back.

Turns out it's a combination of issues with nx, React Native and AWS. This issue explains more. Downgrading aws-sdk packages gets us by for now.

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