unable to connect to metro with ios simulator while upgrading to RN 0.72.0

[sarthakgdeveloper]

New Version

0.72.0

Old Version

0.70.5

Build Target(s)

iOS simulator version 16.2

Output of react-native info

System: OS: macOS 12.6 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Memory: 97.25 MB / 16.00 GB Shell: version: 5.8.1 path: /bin/zsh Binaries: Node: version: 16.16.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 8.11.0 path: /usr/local/bin/npm Watchman: version: 2023.06.12.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/sarthakgupta/.rvm/gems/ruby-2.7.4/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.2 - iOS 16.2 - macOS 13.1 - tvOS 16.1 - watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8815526 Xcode: version: 14.2/14C18 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.16 path: /usr/bin/javac Ruby: version: 2.7.4 path: /Users/sarthakgupta/.rvm/rubies/ruby-2.7.4/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.0 wanted: 0.72.0 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Issue and Reproduction Steps

unable to connect with the react native metro, on android its working fine, but not working on ios, also app is getting build successfully

[shikhar119911]

This happens for me also. Any solution on this?

[billnbell]

t says cannot find bundle.

Node found at: /opt/homebrew/opt/node@18/bin/node error Cannot read properties of undefined (reading 'filter').

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

module.exports = (baseConfig) => {
  const {
    resolver: { sourceExts, assetExts },
  } = getDefaultConfig(__dirname);

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      // eslint-disable-next-line max-len
      // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
      // assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'scss', 'css', 'pcss', 'sass', 'svg'],
    },
  };
};

[huntie]

@billnbell Please see https://github.com/facebook/metro/issues/1010#issuecomment-1602640825 (sourceExts, assetExts is readable from baseConfig or metro-config/src/defaults/defaults).

@sarthakgdeveloper Can you share your Metro config and the commands run?

[sarthakgdeveloper]

// /** // * Metro configuration for React Native // * https://github.com/facebook/react-native // * // * @format // */

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

const config = {};

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

Command: npm react-native run-ios

[eidan66]

Any update? I'm getting this too

[lennertderyck]

Same here

[3imed-jaberi]

@sarthakgdeveloper can you share with us your AppDelegate.mm or AppDelegate.m!

I believe the issue is related to the didFinishLaunchingWithOptions method!

[thib-info]

@sarthakgdeveloper can you share with us your AppDelegate.mm or AppDelegate.m!

I believe the issue is related to the didFinishLaunchingWithOptions method!

Hi, I'm also facing the same issue and here is my AppDelegate.mm file content:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"anonyme";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
  return true;
}

@end

[3imed-jaberi]

@thib-info, I am not sure because your didFinishLaunchingWithOptions looks right. So, to prevent doubt can you modify the latest line;

-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+ [super application:application didFinishLaunchingWithOptions:launchOptions];
+ return YES

[thib-info]

Sorry for the delay @3imed-jaberi, but even with the version you've provided me, metro can't connect to the IOS simulator. It doesn't update the code when changes are being made and when I want to reload the application, it tells me that any devices are being connected. However, it builds my app and makes it run on my simulator. That's really weird. Do you have any other idea ?

[thib-info]

Any update on this issue ? It's impossible to develop if metro can't send us the logs of our application or refresh it …. Someone have a temporary solution ?