0.69.9 -> 0.72.4. Expo/metro issue `

[IncrediblePony]

Environment

> npx react-native info
info Fetching system and libraries information...

System:
  OS: Linux 6.4 Pop!_OS 22.04 LTS
  CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
  Memory: 18.78 GB / 31.24 GB
  Shell:
    version: 5.1.16
    path: /bin/bash

Binaries:
  Node:
    version: 20.6.1
    path: ~/.asdf/shims/node
  Yarn:
    version: 1.22.19
    path: ~/.local/share/pnpm/yarn
  npm:
    version: 9.8.1
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2023.07.24.00
    path: /home/linuxbrew/.linuxbrew/bin/watchman

SDKs:
  Android SDK: Not Found (NOTE: android sdks are in place and application builds just fine)

IDEs:
  Android Studio: Not Found (NOTE: Android Studio is installed and emulator launches just fine)

Languages:
  Java:
    version: 17.0.8.1
    path: ~/.asdf/shims/javac
  Ruby: Not Found 

npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: ^0.72.0

npmGlobalPackages:
  "*react-native*": Not Found

Android:
  hermesEnabled: true
  newArchEnabled: false

iOS:
  hermesEnabled: false
  newArchEnabled: Not found

Things I’ve done to figure out my issue

• [ x] I used upgrade-helper to do my upgrade.

Upgrading version

0.72.4

Description

I've tried to follow the guidance of the react native upgrade helper web tool. I've gotten to the point where every package is installed. The application builds successfully. I've upgraded my java version from 11 to 17. I've done all of the configs and modifications I have been instructed to do, but now a wall has been hit. When I reach the step of getting my application to bundle I get the following error:

Error: Unable to resolve module ./.expo/.virtual-metro-entry from ~/workspace/glfr/ngf/.: 

None of these files exist:
  * .expo/.virtual-metro-entry(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts)
  * .expo/.virtual-metro-entry/index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts)
    at ModuleResolver.resolveDependency (~/workspace/glfr/ngf/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (~/workspace/glfr/ngf/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at ~/workspace/glfr/ngf/node_modules/metro/src/lib/transformHelpers.js:169:21
    at Server._resolveRelativePath (~/workspace/glfr/ngf/node_modules/metro/src/Server.js:1045:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Server.requestProcessor [as _processBundleRequest] (~/workspace/glfr/ngf/node_modules/metro/src/Server.js:449:37)
    at async Server._processRequest (~/workspace/glfr/ngf/node_modules/metro/src/Server.js:383:7)

I am not sure how to go about this. I have tried to create an empty json file in the .expo folder called .virtual-metro-entry.json and making it executable. But that doesn't fix the problem and I expect it to be a problem with my upgrade not taking metro/expo into account.

Pastebin of package.json
Pastebin of .bashrc PATH setup

[IncrediblePony]

I have cleared every imaginable cache known to man. Deleted all old build files, and thrown away yarn.lock files and node_modules

[IncrediblePony]

Well... I 'fixed' the issue be removing expo... So there's that..

[SpadarShut]

Fixed this by replacing
const { getDefaultConfig } = require("@react-native/metro-config");
with
const { getDefaultConfig } = require("expo/metro-config");
in metro.config.js.

[pqv2210]

@SpadarShut after change, are you need re-run metro server or anything?

[SpadarShut]

@pqv2210 you need to have expo/metro-config installed obviously, and yes, restart metro.

[awilson9]

I"m still seeing this issue, after upgrading to 0.72.4. I've always had const { getDefaultConfig } = require("expo/metro-config") so seems like there may be another cause

[efeder-amd]

I'm using Expo with prebuild to generate my react-native app.
I ran into this while upgrading from Expo 48 to Expo 51.

For ios --
It looks like that process had updated the ios/App/AppDelegate.mm file
to replace "index" with ".expo/.virtual-metro-entry" in the following code block:

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Update to this:

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

For android --
In android/app/src/main/java/path/to/application/MainApplication.kt

Replace

override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"

With

override fun getJSMainModuleName(): String = "index"

This defeats the purpose of prebuild as I'm updating native files. But I just wanted to get past this problem as I couldn't find another solution. Hopefully this may help you.

I'm not sure whether you are using Expo for more than just the metro config.
Here appears to be relevant PR for future research.

[akash-anadey]

I'm using Expo with prebuild to generate my react-native app. I ran into this while upgrading from Expo 48 to Expo 51.

For ios -- It looks like that process had updated the ios/App/AppDelegate.mm file to replace "index" with ".expo/.virtual-metro-entry" in the following code block:

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Update to this:

#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

For android -- In android/app/src/main/java/path/to/application/MainApplication.kt

Replace

override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"

With

override fun getJSMainModuleName(): String = "index"

This defeats the purpose of prebuild as I'm updating native files. But I just wanted to get past this problem as I couldn't find another solution. Hopefully this may help you.

I'm not sure whether you are using Expo for more than just the metro config. Here appears to be relevant PR for future research.

Thank you! This worked!

[WillyR0]

Just remove metro-config.js and that's it. If you need it add this one instead.

const{ getDefaultConfig } = require("expo/metro-config") in metro.config.js