[iOS] RN 0.60.0-rc.2 fails to build with CocoaPods frameworks

[jtreanor]

The changes in 0.60.0 to integrate CocoaPods by default are causing build failures if your Podfile includes use_frameworks!. use_frameworks! is a very commonly used CocoaPods option and it is required by many pods. Prior to 0.60.0 it worked fine with the React Native podspec.

React Native version:

System:
    OS: macOS 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 4.86 GB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 24, 26, 27, 28
      Build Tools: 27.0.0, 27.0.3, 28.0.2, 28.0.3
      System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: 18.1.5063045
  IDEs:
    Android Studio: 3.4 AI-183.5429.30.34.5452501
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.0-rc.2 => 0.60.0-rc.2

Steps To Reproduce

1. Create a new project: react-native init AwesomeProject --version 0.60.0-rc.2.
2. Add use_frameworks! to the top of ios/Podfile
3. Install pods: cd ios && pod install.
4. Build & run the app: cd .. && react-native run-ios

You will see build failures that look something like this:

▸ Compiling JSBigString.cpp

❌  /Users/james/src/tmp/AwesomeProject/ios/Pods/Folly/folly/Conv.h:38:10: 'double-conversion/double-conversion.h' file not found

#include <double-conversion/double-conversion.h> // V8 JavaScript implementation
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


▸ Compiling JSBundleType.cpp
▸ Compiling MethodCall.cpp
▸ Compiling JSExecutor.cpp
▸ Compiling JSIndexedRAMBundle.cpp

❌  /Users/james/src/tmp/AwesomeProject/ios/Pods/Folly/folly/Conv.h:38:10: 'double-conversion/double-conversion.h' file not found

#include <double-conversion/double-conversion.h> // V8 JavaScript implementation
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


▸ Compiling JSDeltaBundleClient.cpp

❌  /Users/james/src/tmp/AwesomeProject/ios/Pods/Folly/folly/Conv.h:38:10: 'double-conversion/double-conversion.h' file not found

#include <double-conversion/double-conversion.h> // V8 JavaScript implementation
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


▸ Compiling ReactMarker.cpp
▸ Compiling React-cxxreact-dummy.m
▸ Compiling RAMBundleRegistry.cpp

❌  /Users/james/src/tmp/AwesomeProject/ios/Pods/Folly/folly/Conv.h:38:10: 'double-conversion/double-conversion.h' file not found

#include <double-conversion/double-conversion.h> // V8 JavaScript implementation
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


▸ Compiling NativeToJsBridge.cpp
▸ Compiling ModuleRegistry.cpp
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening AwesomeProject.xcworkspace. Run CLI with --verbose flag for more details.
** BUILD FAILED **


The following build commands failed:
	CompileC /Users/james/src/tmp/AwesomeProject/ios/build/AwesomeProject/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-cxxreact.build/Objects-normal/x86_64/JSBigString.o /Users/james/src/tmp/AwesomeProject/node_modules/react-native/ReactCommon/cxxreact/JSBigString.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Describe what you expected to happen:

The app should build and run successfully.

Snack, code example, or link to a repository:

I have created a sample repository to demonstrate the issue here: https://github.com/jtreanor/react-native-cocoapods-frameworks.

Causes and fixes

I have been able to fix the error shown in the log above with some .podspec changes, but there are few more errors I haven't been able to solve. You can see my WIP react-native branch here.

[michalchudziak]

I've met the same issue trying to integrate 0.60-rc.2 to a native swift app with use_frameworks! enabled.

[kelset]

cc @orta @alloy @Salakar sorry to bother you folks, would you mind checking this issue?

[jtreanor]

I have been looking into this some more and I wanted to give a quick update to share what I have found.

The build error I posted in the description is easily solved by adding "$(PODS_ROOT)/DoubleConversion" to HEADER_SEARCH_PATHS of React-cxxreact, React-jsi and React-jsiexecutor.

Once I did this, I started seeing a different error:

▸ Compiling RCTImageSource.m

❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/ReactCommon/yoga/yoga/CompactValue.h:11:10: 'cmath' file not found

#include <cmath>
           ^~~~~~~~~~~~~~~~~~~~~~~~~



❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/React/Base/RCTConvert.h:17:9: could not build module 'yoga'

#import <yoga/Yoga.h>
         ^~~~~~~

I fixed this by setting header_files in yoga.podspec to yoga/{Yoga,YGEnums,YGMacros,YGValue}.h (reverts the change in 97e6ea1).

Next I saw this error:

▸ Linking React

❌  Undefined symbols for architecture x86_64
> Symbol: google::LogMessageFatal::LogMessageFatal(char const*, int)
> Referenced from: facebook::react::DispatchMessageQueueThread::runOnQueueSync(std::__1::function<void ()>&&) in RCTCxxUtils.o



❌  ld: symbol(s) not found for architecture x86_64



❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

I solved this by adding React-jsi as a dependency of React-Core.

Now I saw this error:

▸ Linking React

❌  Undefined symbols for architecture x86_64
> Symbol: google::LogMessageFatal::LogMessageFatal(char const*, int)
> Referenced from: facebook::react::DispatchMessageQueueThread::runOnQueueSync(std::__1::function<void ()>&&) in RCTCxxUtils.o



❌  ld: symbol(s) not found for architecture x86_64



❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

This was solved by adding glog as a dependency of React-Core.

Finally, I am now seeing the following error:

▸ Compiling RCTWebSocketExecutor.m

❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.h:8:9: 'React/RCTDefines.h' file not found

#import <React/RCTDefines.h>
        ^~~~~~~~~~~~~~~~~~~~


▸ Compiling React-RCTWebSocket-dummy.m
▸ Compiling RCTReconnectingWebSocket.m

❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.h:8:9: 'React/RCTDefines.h' file not found

#import <React/RCTDefines.h>
        ^~~~~~~~~~~~~~~~~~~~

This is where I am stuck. It seems that #import <React/X> doesn't work for any of the Library podspecs. My guess is that this is because React/ has multiple definitions, but I don't have a very good understanding of how this works.

Update: I have been able to resolve the import error above by changing s.header_dir in the podspec. We probably don't want to do that since it would break existing includes. Anyway, when I did that, it revealed a bunch of C++ import errors:

▸ Compiling RCTWebSocketExecutor.m

❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/ReactCommon/jsiexecutor/jsireact/JSINativeModules.h:8:10: 'memory' file not found

#include <memory>
         ^~~~~~~~



❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/ReactCommon/cxxreact/CxxModule.h:8:10: 'functional' file not found

#include <functional>
         ^~~~~~~~~~~~



❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/ReactCommon/jsi/jsi/jsi.h:9:10: 'cassert' file not found

#include <cassert>
         ^~~~~~~~~



❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/React/CxxBridge/JSCExecutorFactory.h:10:10: could not build module 'jsireact'

#include <jsireact/JSIExecutor.h>
 ~~~~~~~~^



❌  /Users/james/src/tmp/AwesomeProject/ios/Pods/glog/src/glog/logging.h:42:10: 'iosfwd' file not found

#include <iosfwd>
         ^~~~~~~~



❌  /Users/james/src/tmp/AwesomeProject/node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.h:8:9: could not build module 'React'

#import <React/RCTDefines.h>
 ~~~~~~~^

[jtreanor]

I am continuing to dump everything I find here. Hopefully it will be helpful for coming to a solution. I have made some more progress but I think some non-trivial changes will be needed.

I have managed to get things building, but only by adding 'DEFINES_MODULE' => 'NO' to React-Core.podspec. We definitely don't want to do this as it would break a number of things but it is a starting point. You can see my branch here.

I believe the reason for the last error in my previous comment ('memory' file not found etc.) is that React-Core now exposes C++ headers, such as JSCExecutorFactory.h. Since the module is imported by plain old Objective C headers, such as RCTWebSocketExecutor.h above, Xcode tries to build the C++ headers as ObjC and fails. This was not the case before the split as React/CxxBridge and React/Core were merged in 97edac1.

If I am correct about the cause here, I think there are a few options:

• Split React-Core.podspec into React-Core.podspec, React-CxxBridge.podspec and a third podspec with shared logic (since dependencies can't be circular).
• Find a way to build the library podspecs as C++ so that it doesn't trip up. I'm not sure if it is possible and it may just hide the problem for a later time.

I would love to hear if others think I am on the right track here. I am happy to jump in with any implementation as needed. We are hoping to adopt 0.60.0 in https://github.com/wordpress-mobile/gutenberg-mobile once it is released and this is a blocker for us.

[kelset]

Hey @jtreanor thanks for all your work!

I've tried to raise this in the core contributors discord - but sadly I haven't got much feedback (one dev really good at iOS-fu should be back from holidays tomorrow 😅).

One of the few things I got told is that this overall issue with use_framework! was already there before, and now it's just more "visible".

And also, it seems that in most scenarios not having use_framework! leads to better performances: I know it may sound unrealistic, but have you considered shifting the problem 180deg and changing the pods that use that flag? How many pods are you relying on that have the flag? (Just for me to get an idea)

(anyway, I'll try to raise this to a few more people in the meantime)

[jtreanor]

Thanks for the response @kelset.

I've tried to raise this in the core contributors discord - but sadly I haven't got much feedback (one dev really good at iOS-fu should be back from holidays tomorrow 😅).

I really appreciate this!

I know it may sound unrealistic, but have you considered shifting the problem 180deg and changing the pods that use that flag? How many pods are you relying on that have the flag? (Just for me to get an idea)

Unfortunately, that's not going to be possible for us because Gutenberg, the project we are working on, is itself a pod that is written in Swift. Swift pods can only be installed with the use_frameworks! option or the use_modular_headers! option. The latter is even more broken and was not working prior to 0.60.0 either.

I don't have a good answer on the number of pods that don't support use_frameworks! but it is very quite for use_modular_headers! not to work and often we are forced to use one or the other.

After more investigation, I found a way to avoid the larger changes I suggested in my previous comment. I have opened a PR here: #25393

It's possible that changing the header_dir values and related imports will be a breaking change so I am interested in feedback on that.

[jensellfors]

I will have a play, but I created a simple repo way back with Swift (without use_frameworks) and react-native using bridging header. Maybe that could be a solution. https://github.com/jenshandersson/React-Native-Swift

[jtreanor]

I will check that out @jenshandersson but unfortunately, I don't think it will work with 0.60+. That is the same workflow we are using and it was fine until 0.60.0.