Apple M2芯片Mac出现'React/RCTBridgeDelegate.h'文件找不到错误

在搭载M2芯片的Apple MacBook Pro上编译React Native项目时，出现以下编译错误：
'React/RCTBridgeDelegate.h' file not found

环境信息 #

执行npx react-native info输出如下：

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 212.94 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.20.1 - ~/.nvm/versions/node/v14.20.1/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.20.1/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 2023.1 AI-231.9392.1.2311.11255304
    Xcode: 15.2/15C500b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.19 - /usr/bin/javac
    Python: 3.8.18 - /opt/homebrew/opt/python@3.8/libexec/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

已尝试的无效操作 #

• 在Rosetta模式下运行终端
• 执行pod update和pod install

项目Podfile内容 #

platform :ios, '12.1'

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

# https://rnfirebase.io/analytics/usage#disable-ad-id-usage-on-ios
$RNFirebaseAnalyticsWithoutAdIdSupport = true

use_frameworks! :linkage => :static
target 'AppName' do
  # Pods for AppName
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/React/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false # set :modular_headers to false to enable react-native-audio-recorder-player
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false # set :modular_headers to false to enable react-native-audio-recorder-player
  pod 'RCT-Folly', :podspec => '../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec', :modular_headers => false # set :modular_headers to false to enable react-native-audio-recorder-player
  pod 'React-perflogger', :path => '../node_modules/react-native/ReactCommon/reactperflogger'
  pod 'React-runtimeexecutor', :path => '../node_modules/react-native/ReactCommon/runtimeexecutor'
  # react-native-maps
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'
  # end

  # Manual Linking

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  # START React Native Permissions
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"
  # END React Native Permissions

  pod 'react-native-agora', :path => '../node_modules/react-native-agora'

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

  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path

  use_native_modules!

  $static_framework = []
  $static_framework += [
    'react-native-maps',
    'Google-Maps-iOS-Utils',
    'GoogleMaps',
    'RNPermissions',
    'Permission-Notifications',
  ]
  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
        installer.pod_targets.each do |pod|
            if $static_framework.include?(pod.name) || pod.name.start_with?('Permission-')
                def pod.build_type;
                Pod::BuildType.static_library # >= 1.9
            end
        end
    end
  end

  post_install do |installer|
    find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm", "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
    find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm", "RCTBridgeModuleNameForClass(module))", "RCTBridgeModuleNameForClass(Class(module)))")

    find_and_replace("../node_modules/react native/React/CxxBridge/RCTCxxBridge.mm", "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
    find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm", "RCTBridgeModuleNameForClass(strongModule))", "RCTBridgeModuleNameForClass(Class(strongModule)))")

    installer.pods_project.targets.each do |target|
      # Fix signing issue with Xcode 14
      if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
        target.build_configurations.each do |config|
            config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
        end
      end
      #
      if target.name == 'RCT-Folly'
        target.build_configurations.each do |config|
          config.build_settings['HEADER_SEARCH_PATHS'] = "$(inherited) ${PODS_ROOT}/fmt/include"
        end
      end
    end

  end

end

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

target 'AppName-tvOS' do
  # Pods for AppName-tvOS

  target 'AppName-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

解决方案 #

1. 修复Podfile中的路径错误 #

post_install阶段有一行路径存在拼写错误：

find_and_replace("../node_modules/react native/React/CxxBridge/RCTCxxBridge.mm", ...)

需修改为：

find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm", ...)

（react native缺少连字符，导致文件查找失败、替换操作失效）

2. 配置Xcode头文件搜索路径 #

打开Xcode项目，进入Build Settings -> Header Search Paths，确保添加以下路径并设置为recursive：

• $(SRCROOT)/../node_modules/react-native/React

3. 适配Xcode 15与M2芯片的编译设置 #

在Podfile的post_install块中，新增React相关target的编译配置：

installer.pods_project.targets.each do |target|
  # 原有代码...
  
  # 新增：适配Xcode 15和ARM64架构
  if target.name.start_with?('React') || target.name == 'Yoga'
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      config.build_settings['ARCHS[sdk=iphonesimulator*]'] = 'arm64 x86_64'
    end
  end
end

4. 彻底清理缓存并重新构建 #

依次执行以下命令：

# 清理node_modules并重新安装依赖
rm -rf node_modules && npm install

# 进入iOS目录，清理Pods并重新安装
cd ios
rm -rf Pods Podfile.lock
pod deintegrate
pod install

# 清理Xcode派生数据
rm -rf ~/Library/Developer/Xcode/DerivedData

5. 确保Xcode使用Rosetta模式打开 #

右键点击应用程序中的Xcode，选择「显示简介」，勾选「使用Rosetta打开」，重启Xcode后重新编译项目。

内容的提问来源于stack exchange，提问作者Vinayak Bhat