Unable to create an app because of the flipper in debug mode (iOS) - [0.65.1]

[DanielAraldi]

Description

Bug Report

Good morning people, everything fine? I come here to report a supposed bug that is happening in the build of my react-native application that is in version 0.65.1.

I've been trying to build the application for a long time and I haven't come up with any solution. I've checked many issues here and in the Flipper repository, hoping to find a solution. But unfortunately I didn't get anything.

I don't know exactly what is causing this problem. Basically, I'm trying to build the application in debug. However, I'm being prevented by Flipper, even disabling it.

I build the app in launch mode and it works perfectly. But in debugging it breaks at the end of compilation. Returns a huge error saying that several modules were reset or that the module could not be built. Below is an example of the error:

fatal error: redefinition of module 'fmt'
fatal error: redefinition of module 'folly'
fatal error: could not build module 'Darwin'
fatal error: could not build module 'CoreFoundation'
fatal error: could not build module 'Foundation'
fatal error: could not build module '_Builtin_stddef_max_align_t'

Note: I'm not sure if this bug is related to my react-native version or is a bug of the flipper itself.

Version

0.65.1

Output of npx react-native info

System:
    OS: macOS 12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 37.15 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

To reproduce the error, I believe it is enough to insert the same code snippets that I made available, such as those of my Podfile and my AppDelegate.m, and download and configure the same dependencies that are in my application in a react-native project in version 0.65.1.

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

Note: Something important to note here is that, even though I have a react-native app version 0.65.1, my Podfile has the Flipper settings for react-native version 0.62.x and not version 0.63.x. I did this, because when I put the settings that Flipper made available for version 0.63.x or more, my Podfile was not even generated.

Below is how mine is Podfile:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

def flipper_post_install(installer)
  file_name = Dir.glob("*.xcodeproj")[0]
  app_project = Xcodeproj::Project.open(file_name)
  app_project.native_targets.each do |target|
    target.build_configurations.each do |config|
      cflags = config.build_settings['OTHER_CFLAGS'] || '$(inherited) '
      unless cflags.include? '-DFB_SONARKIT_ENABLED=1'
        puts 'Adding -DFB_SONARKIT_ENABLED=1 in OTHER_CFLAGS...'
        cflags << '-DFB_SONARKIT_ENABLED=1'
      end
      config.build_settings['OTHER_CFLAGS'] = cflags
    end
    app_project.save
  end
  installer.pods_project.save
end

target 'my_app' do
  config = use_native_modules!
  use_modular_headers!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'simdjson', path: '../node_modules/@nozbe/simdjson'
  pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: ['BarcodeDetectorMLKit']
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
  pod 'react-native-image-editor', :path => '../node_modules/@react-native-community/image-editor'
  pod 'rn-fetch-blob', :path => '../node_modules/rn-fetch-blob'

  target 'my_appTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!() # should match the version of your Flipper client app

  post_install do |installer|
    react_native_post_install(installer)

    # Apple Silicon builds require a library path tweak for Swift library discovery or "symbol not found" for swift things
    installer.aggregate_targets.each do |aggregate_target| 
      aggregate_target.user_project.native_targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['LIBRARY_SEARCH_PATHS'] = ['$(SDKROOT)/usr/lib/swift', '$(inherited)']
        end
      end
      aggregate_target.user_project.save
    end

    # Flipper requires a crude patch to bump up iOS deployment target, or "error: thread-local storage is not supported for the current target"
    # I'm not aware of any other way to fix this one other than bumping iOS deployment target to match react-native (iOS 11 now)
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
       end
    end

    # ...but if you bump iOS deployment target, Flipper barfs again "Time.h:52:17: error: typedef redefinition with different types"
    # We need to make one crude patch to RCT-Folly - set `__IPHONE_10_0` to our iOS target + 1
    # https://github.com/facebook/flipper/issues/834 - 84 comments and still going...
    `sed -i -e  $'s/__IPHONE_10_0/__IPHONE_12_0/' Pods/RCT-Folly/folly/portability/Time.h`
  end
end

Follow below my AppDelegate.m:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTLinkingManager.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
 FlipperClient *client = [FlipperClient sharedClient];
 SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
 [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
 [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
 [client addPlugin:[FlipperKitReactPlugin new]];
 [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
 [client start];
}
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
 InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"my_app"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

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

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

@end

Finally, my package.json below, if you want to see:

{
  "name": "my_app",
  "version": "2.3.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint --fix .",
    "pretty": "prettier --write .",
    "release": "yarn android --variant=release",
    "clean:android": "cd android && ./gradlew clean && cd ..",
    "apk": "cd android && ./gradlew assembleRelease && cd ..",
    "aab": "cd android && ./gradlew bundleRelease && cd ..",
    "devtools": "react-devtools"
  },
  "dependencies": {
    "@nartc/react-native-barcode-mask": "^1.2.0",
    "@nozbe/watermelondb": "^0.23.0",
    "@react-native-async-storage/async-storage": "1.17.10",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/image-editor": "^2.3.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^7.1.3",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "axios": "^0.21.4",
    "date-fns": "^2.24.0",
    "metro-minify-terser": "^0.66.2",
    "native-base": "3.3.11",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-animatable": "^1.3.3",
    "react-native-camera": "^4.2.1",
    "react-native-document-picker": "^6.0.4",
    "react-native-fast-image": "^8.5.11",
    "react-native-fs": "^2.18.0",
    "react-native-geolocation-service": "^5.3.0-beta.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-crop-picker": "^0.37.2",
    "react-native-map-link": "^2.10.1",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^13.0.0",
    "react-native-paper": "^4.9.2",
    "react-native-reanimated": "2.2.1",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.4.0",
    "react-native-signature-canvas": "^4.1.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.3.0",
    "react-native-webview": "^11.13.0",
    "rn-fetch-blob": "^0.12.0",
    "rn-swipe-button": "^1.3.6",
    "styled-components": "^5.3.5",
    "styled-system": "^5.1.5",
    "vanilla-masker": "^1.2.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react-native": "^7.2.0",
    "@types/axios": "^0.14.0",
    "@types/jest": "^27.5.1",
    "@types/react": "^17.0.14",
    "@types/react-native": "^0.65.1",
    "@types/react-native-snap-carousel": "^3.8.5",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components": "^5.1.25",
    "@types/styled-components-react-native": "^5.1.3",
    "@types/vanilla-masker": "^1.2.1",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@typescript-eslint/parser": "^5.32.0",
    "@typescript-eslint/typescript-estree": "^4.28.3",
    "babel-jest": "^27.2.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "detox": "^18.20.0",
    "eslint": "8.21.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "jest": "^27.2.1",
    "jest-circus": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "prettier": "2.7.1",
    "react-native-codegen": "^0.0.11",
    "react-native-flipper": "^0.142.0",
    "react-native-flipper-databases": "^2.3.2",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "17.0.2",
    "typescript": "4.7.4"
  }
}

Some similar issues with what's happening to me:

• Typedef redefinition with different types ('uint8_t' (aka 'unsigned char') vs 'enum clockid_t') when building latest react-native rc with macOS target flipper#834
• [iOS] AppDelegate.m: 'FlipperKit/FlipperClient.h' file not found #29133
• Can't make an iOS build [0.65.0] #32046
• New React Native project won't build on Xcode 13. #31733

Debug info:

• XCode version: 13.4.1.
• Device type: Physical device.
• Device version: iOS 15.6.

[DanielAraldi]

Hello! Apparently the problem was solved by upgrading the React Native version from 0.65.x to 0.66.4.