Getting error "Unable to resolve module react-native" when upgrading from 0.70.7 to 0.73.9

[rohanp-91]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
I am upgrading from RN 0.70.7 to RN 0.73.9. I followed the React Native Upgrade Helper and have been able to successfully build my iOS project (haven't gotten to Android yet).

However, when I run metro dev server locally, it keeps failing with the following when loading the bundle:

Error: Unable to resolve module react-native from /Users/rohanpathak/Documents/source/MyMobileApp/client/mobile-app/app/index.js: react-native could not be found within the project or in these directories:
  node_modules
  ../../node_modules
  node_modules
  ../../node_modules
> 1 | import { AppRegistry, LogBox, Platform } from 'react-native';
    |                                                ^
  2 | 
  3 | // workaround issue: https://github.com/uuidjs/uuid/issues/375
  4 | // https://github.com/uuidjs/uuid#getrandomvalues-not-supported
    at ModuleResolver.resolveDependency (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/node-haste/DependencyGraph.js:235:43)
    at /Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async visit (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 0)
    at async buildSubgraph (/Users/rohanpathak/Documents/source/MyMobileApp/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)

I have a mono-repo and I can see that the react-native module is present within node_modules in the "mobile-app" folder as well as in the node_modules at the project root. So, I am not sure why it's having an issue resolving it.

This is my metro.config.js:

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

 const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    nodeModulesPaths: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, '../../node_modules'),
    ],
  },
  watchFolders: [__dirname],
};

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

And this is my babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./app/'],
        alias: {},
      },
    ],
    [
      "module:@myapp-mobile/i18n-babel-plugin",
    ],
    'react-native-reanimated/plugin',
  ],
  sourceMaps: true,
};

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

What is the expected behavior?
It should be able to resolve the react-native module

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
yarn 1.22.21
node 22.4.1
macOS 14.6

[rohanp-91]

Can someone please look into the issue? It's currently blocking us from shipping important changes.

[robhogan]

watchFolders should include the monorepo root, we don't support or recommend babel-plugin-module-resolver, and your nodeModulesPaths config isn't necessary (those paths are already searched as they're in the hierarchy).

If that doesn't help, we'll need a minimal reproduction. Obviously most people aren't running into this issue.

[rohanp-91]

Thanks for the suggestions @robhogan. I tried adding the changes you recommended, now I am seeing an issue where the dev server won't start:

I am running npx react-native start --verbose and I see it gets stuck here. I don't get the message "Dev server ready". And I don't know how to check where it's getting stuck.

npm WARN ignoring workspace config at /Users/rohanpathak/Documents/source/MyMobileApp/client/mobile-app/.npmrc 
warn Package react-native-vector-icons contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
(node:12520) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
debug Reading Metro config from /Users/rohanpathak/Documents/source/MyMobileApp/client/mobile-app/metro.config.js
info Welcome to React Native v0.73
info Starting dev server on port 8081...

                        ▒▒▓▓▓▓▒▒
                     ▒▓▓▓▒▒░░▒▒▓▓▓▒
                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                     ▒▓▓▓▒░░░░▒▓▓▓▒
                        ▒▒▓▓▓▓▒▒


debug Checking for a newer version of React Native
debug Current version: 0.73.9
debug Cached release version: 0.75.2
debug Checking for newer releases on GitHub
                Welcome to Metro v0.80.10
              Fast - Scalable - Integrated


debug Latest release: 0.75.2 (undefined)
info React Native v0.75.2 is now available (your project is running on v0.73.9).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.75.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.75.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Any idea why this might happen?

[rohanp-91]

@robhogan Actually, it does start the dev server, but it takes a terrible amount of time to finally get there. Then during the bundle load, I get the following error:

<--- Last few GCs --->

[18134:0x148008000]   292890 ms: Mark-Compact 4036.1 (4128.7) -> 4024.0 (4129.5) MB, pooled: 1 MB, 1600.83 / 0.08 ms  (average mu = 0.142, current mu = 0.128) task; scavenge might not succeed
[18134:0x148008000]   294447 ms: Mark-Compact 4036.9 (4130.0) -> 4024.3 (4130.0) MB, pooled: 0 MB, 1320.58 / 0.12 ms  (average mu = 0.146, current mu = 0.152) task; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x104722634 node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 2: 0x1048bd118 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 3: 0x1048bd0cc v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 4: 0x104a66220 v8::internal::Heap::CallGCPrologueCallbacks(v8::GCType, v8::GCCallbackFlags, v8::internal::GCTracer::Scope::ScopeId) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 5: 0x104a67f5c v8::internal::Heap::DevToolsTraceEventScope::~DevToolsTraceEventScope() [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 6: 0x104a668d4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_8::operator()() const [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 7: 0x104a66588 void heap::base::Stack::SetMarkerAndCallbackImpl<v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_8>(heap::base::Stack*, void*, void const*) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 8: 0x104634028 PushAllRegistersAndIterateStack [/opt/homebrew/Cellar/node/22.4.1/bin/node]
 9: 0x104a64f50 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
10: 0x104aa4a00 v8::internal::MinorGCJob::Task::RunInternal() [/opt/homebrew/Cellar/node/22.4.1/bin/node]
11: 0x104795a34 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task>>) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
12: 0x104795750 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/opt/homebrew/Cellar/node/22.4.1/bin/node]
13: 0x108aaa4a8 uv__async_io [/opt/homebrew/Cellar/libuv/1.48.0/lib/libuv.1.dylib]
14: 0x108aba164 uv__io_poll [/opt/homebrew/Cellar/libuv/1.48.0/lib/libuv.1.dylib]
15: 0x108aaa93c uv_run [/opt/homebrew/Cellar/libuv/1.48.0/lib/libuv.1.dylib]
16: 0x104635990 node::SpinEventLoopInternal(node::Environment*) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
17: 0x10476c930 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
18: 0x10476c610 node::NodeMainInstance::Run() [/opt/homebrew/Cellar/node/22.4.1/bin/node]
19: 0x1046dfb18 node::Start(int, char**) [/opt/homebrew/Cellar/node/22.4.1/bin/node]
20: 0x18593f154 start [/usr/lib/dyld]
zsh: abort      npx react-native start --verbose

[efstathiosntonas]

@rohanp-91 try running this:

node --max_old_space_size=16000 node_modules/react-native/cli.js start --reset-cache for rn >= 0.75.x

or

node --max_old_space_size=16000 node_modules/react-native/local-cli/cli.js start --reset-cache for < rn 0.75.x

(it's up to you if you want to keep the --reset-cache, --max_old_space_size should respect your machine RAM )