Metro error "Unable to resolve module ... could not be found within the project or in these directories: node_modules" even if the file exists in node_modules

[lucaskraus]

Hi everyone!

I'm facing a error with my Expo application when building the web version. Since the new SDK 52 version, I'm trying to add the Reown React package to my application. The Expo SDK 52 allow us to add DOM Components which is components based on React jsx/tsx.

But the error is not related to this. After all the basic setup of Reown, when I'm trying to initialize the application the following error is showing for me:

Metro error: Unable to resolve module @reown/appkit/networks from /home/lucas/code/Frontend/src/utils/web3/ReownConfig.tsx: @reown/appkit/networks could not be found within the project or in these directories: node_modules

3 | import { arbitrum, mainnet, AppKitNetwork } from "@reown/appkit/networks";

Reown doc reference: https://docs.reown.com/appkit/react/core/installation

As you can see below, @reown/appkit/networks it's a perfect exported file from node_modules, I can see it there.

Here's my metro.config.js file:

const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const { withNativeWind } = require("nativewind/metro");

module.exports = (() => {
  // eslint-disable-next-line no-undef
  const config = getSentryExpoConfig(__dirname);

  const { transformer, resolver } = config;

  config.resetCache = true;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };

  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg", "mjs", "cjs"],
  };

  return withNativeWind(config, { input: "./global.css" });
})();

And here's my babel.config.js file:

module.exports = function (api) {
  api.cache(false);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      "babel-plugin-transform-typescript-metadata",
      ["@babel/plugin-proposal-decorators", { legacy: true }],
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      "babel-plugin-parameter-decorator",
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin",
    ],
  };
};

My environment information:

expo-env-info 1.2.2 environment info:
    System:
      OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
      Shell: 5.1.16 - /bin/bash
    Binaries:
      Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
      npm: 10.9.1 - ~/.nvm/versions/node/v20.15.1/bin/npm
    npmPackages:
      expo: ~52.0.26 => 52.0.26 
      expo-router: ~4.0.17 => 4.0.17 
      metro: ^0.81.0 => 0.81.0 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.6 => 0.76.6 
      react-native-web: ~0.19.10 => 0.19.13 
    npmGlobalPackages:
      expo-cli: 6.3.12
    Expo Workflow: manage

Thanks in advance!

[mlecoq]

I have a similar issue on apps that are in mono repo: after upgrade to react-native 0.77, metro can't find node modules or packages within my repo

Here is 2 examples of metro config that don't work

const {getDefaultConfig} = require('expo/metro-config');
const path = require('path');

// Find the project and workspace directories
const projectRoot = __dirname;
// This can be replaced with `find-yarn-workspace-root`
const monorepoRoot = path.resolve(projectRoot, '../..');

const config = getDefaultConfig(projectRoot);

// 1. Watch all files within the monorepo
config.watchFolders = [monorepoRoot];
// 2. Let Metro know where to resolve packages and in what order
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
];

module.exports = config;

const path = require('path');
const { mergeConfig } = require('@react-native/metro-config');

const { getSentryExpoConfig } = require('@sentry/react-native/metro');

const config = {
  transformer: {
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  server: {
    unstable_serverRoot: __dirname,
  },
  watchFolders: [path.resolve(__dirname, '../../')],
};

module.exports = mergeConfig(getSentryExpoConfig(__dirname), config);

I have tried many configurations (with projectRoot in app directory or root directory of the mono repo, unstable_serverRoot, watchFolders, nodeModulesPath ...) and in every cases I have an issue, with many adjustments (nodeModulesPath + resolvePath) I succeeded in fixing access to node modules and local packages, but finally I have an issue with relay (and .relayprovider file)

Is there any specific modification to be done on monorepo with react native 0.77 ?

[mlecoq]

the bug is on Expo side (52.0.27)