Couldn't connect Metro with iOS or Android emulator after upgrading to 0.72.1

[molchanovskiy]

Description

We are using this project structure

fe-app
 - app
     - ios
     - android
     - src
     - package.json
     - metro.config.js
     - react-native.config.js
     ......
 - web
 - node_modules
 - package.json
 - packages
 .....

App is running success even with error when Metro starting automatically xcode script "error No metro config found in"
When I run metro manually from app folder it works fine but not connected to app, app is working but no logs are shown in Metro, app is not reloading by pressing R, so it is not connected with app and seems like Metro is running somewhere is background or something, I can't find what is causing it.

Metro config:

/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* @format
*/
const path = require("path");
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

module.exports = (async () => {
 const {
   resolver: { sourceExts, assetExts },
 } = await getDefaultConfig();
 return mergeConfig({
   transformer: {
     babelTransformerPath: require.resolve("react-native-svg-transformer"),
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: true,
       },
     }),
   },
   resolver: {
     assetExts: assetExts.filter((ext) => ext !== "svg"),
     sourceExts: [...sourceExts, "svg"],
     resolverMainFields: ["sbmodern", "react-native", "browser", "main"],
   },
   watchFolders: [path.resolve(__dirname, "../")],
 });
})();

What can be wrong? Should I pass a custom metro config path somehow or something?

React Native Version

0.72.1

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Max
Memory: 91.36 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.13.0
path: ~/.nvm/versions/node/v16.13.0/bin/node
Yarn:
version: 3.3.1
path: ~/.yarn/bin/yarn
npm:
version: 9.4.2
path: ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /Users/a.mochanovskiy/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.17
path: /Users/a.mochanovskiy/.jenv/shims/javac
Ruby:
version: 2.7.6
path: /Users/a.mochanovskiy/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: ^0.72.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Run app with xcode or by terminal command

"ios": "concurrently \"yarn start\" \"yarn setup:au-dev && cd ios && pod install && cd .. && react-native run-ios --simulator='iPhone 14' --scheme=DEV_AU_DEBUG --configuration=DEV_AU_DEBUG\""

Snack, code example, screenshot, or link to a repository

`Node found at: /Users/a.mochanovskiy/.nvm/versions/node/v16.13.0/bin/node

error No metro config found in /Users/a.mochanovskiy/Projects/fe-app.
Process terminated. Press to close the window`

[huntie]

Hi @molchanovskiy!

I'm not sure that we support receiving config as a promise. Please note also that:

• getDefaultConfig does not need an await operation and also requires __dirname as an argument.
• Your config is not merged with the required default config as per the template.
• The default for getTransformOptions now matches the old config file, so can be removed to simplify your config!

Please can you try simplifying your config file to:

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

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"],
    resolverMainFields: ["sbmodern", "react-native", "browser", "main"],
  },
  watchFolders: [path.resolve(__dirname, "../")],
};

module.exports = mergeConfig(defaultConfig, config);

[molchanovskiy]

Hello @huntie
It works thank you! The only thing I had changed in you example is baseConfig to defaultConfig as there is no baseConfig variable.

Do you know what is causing this error below? It is working and Metro connected with app and displaying everything, but I see this Error when Metro started.

Error while reading cache, falling back to a full crawl:
 Error: Unable to deserialize cloned data due to invalid or unsupported version.
    at deserialize (node:v8:344:7)
    at DiskCacheManager.read (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro-file-map/src/cache/DiskCacheManager.js:53:33)
    at HasteMap.read (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro-file-map/src/index.js:356:39)
    at /Users/a.mochanovskiy/Projects/fe-app/node_modules/metro-file-map/src/index.js:290:36
    at HasteMap.build (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro-file-map/src/index.js:341:9)
    at new DependencyGraph (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro/src/node-haste/DependencyGraph.js:60:8)
    at new Bundler (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro/src/Bundler.js:18:22)
    at new IncrementalBundler (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro/src/IncrementalBundler.js:35:21)
    at new Server (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro/src/Server.js:77:21)
    at runMetro (/Users/a.mochanovskiy/Projects/fe-app/node_modules/metro/src/index.flow.js:57:18)
                Welcome to Metro v0.76.5
              Fast - Scalable - Integrated

r - reload the app
d - open developer menu
i - run on iOS
a - run on Android

[molchanovskiy]

Actually it was fixed by deleting node_modules and installing clear ones.

[EduardSavchenko]

@huntie thanks you

[aybarska]

@huntie worked. Thx