0.73 fails to build on iOS with use_frameworks! :static due to yoga header path issue

[evelant]

Old Version

0.72.7

New Version

0.73.0

Description

As seems to happen with every new version, header paths are broken on iOS with use_frameworks! :static

pnpm install

pnpm expo start

eas build -p ios --profile development --local

fails to compile due to header paths issue

[RUN_FASTLANE] › Compiling .pnpm Pods/Yoga » PixelGrid.cpp
[RUN_FASTLANE]
❌  (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp:10:10)

   8 | #include <yoga/Yoga.h>
   9 |
> 10 | #include <yoga/algorithm/PixelGrid.h>
     |          ^ 'yoga/algorithm/PixelGrid.h' file not found
  11 | #include <yoga/numeric/Comparison.h>
  12 |
  13 | namespace facebook::yoga {

Steps to reproduce

https://github.com/evelant/expo50upgrade/

git clone https://github.com/evelant/expo50upgrade/

cd expo50upgrade

pnpm install

pnpm expo start

eas build -p ios --profile development --local

Affected Platforms

Build - MacOS

Output of npx react-native info

System:
  OS: macOS 14.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 348.45 MB / 16.00 GB
  Shell:
    version: 0.85.0
    path: /etc/profiles/per-user/imagio/bin/nu
Binaries:
  Node:
    version: 20.8.0
    path: /etc/profiles/per-user/imagio/bin/node
  Yarn:
    version: 1.22.21
    path: /etc/profiles/per-user/imagio/bin/yarn
  npm:
    version: 10.1.0
    path: /etc/profiles/per-user/imagio/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.12.1
    path: /etc/profiles/per-user/imagio/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    API Levels:
      - "33"
    Build Tools:
      - 33.0.0
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.8.1
    path: /etc/profiles/per-user/imagio/bin/javac
  Ruby:
    version: 3.1.4
    path: /etc/profiles/per-user/imagio/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

[RUN_FASTLANE] › Compiling .pnpm Pods/Yoga » PixelGrid.cpp
[RUN_FASTLANE]
❌  (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp:10:10)

   8 | #include <yoga/Yoga.h>
   9 |
> 10 | #include <yoga/algorithm/PixelGrid.h>
     |          ^ 'yoga/algorithm/PixelGrid.h' file not found
  11 | #include <yoga/numeric/Comparison.h>
  12 |
  13 | namespace facebook::yoga {

Reproducer

https://github.com/evelant/expo50upgrade/

Screenshots and Videos

N/A

[iron-leo]

I can't run successfully iOS build even with default Readme.md

1. Install npm deps, gems, cocoapods.
2. npm start ( Metro bundler )

• Xcode 15.1, Sonoma 14.2

3. npm run ios ( in second terminal window ) failed:

❯ npm run ios

[email protected] ios react-native run-ios

info A dev server is already running for this project on port 8081. info Found Xcode workspace "RnTemplate.xcworkspace" info Found booted iPhone SE (3rd generation) info Building (using "xcodebuild -workspace RnTemplate.xcworkspace -configuration Debug -scheme RnTemplate -destination id=C26067CA-B437-43C3-BA26-072C31EA0211") ▸ Running script '[CP] Copy XCFrameworks' ▸ Running script '[CP] Copy XCFrameworks' ▸ Running script '[CP] Copy XCFrameworks' Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods') ▸ Running script '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' ▸ Running script '[CP] Copy XCFrameworks' ▸ Processing ResourceBundle-RCTI18nStrings-React-Core-Info.plist ▸ Running script '[CP-User] Generate Specs' Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'RnTemplate' from project 'RnTemplate')

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor

error Failed to build iOS project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'RnTemplate.xcworkspace'.

[evelant]

@iron-leo I think that's a totally separate issue. Did you run react-native start before trying to build? metro no longer gets started automatically and IIRC that's the (not super helpful) error message it gives.

[kelset]

cc @cipolleschi

[cipolleschi]

Hi @evelant thanks for the report. There are at least two things that concern me:

1. pnpm is not officially supported yet, we know that there are issues with that setup
2. you are using expo
3. Dynamic frameworks jobs passed on 0.73. So we are confident that static frameworks will works as well, because dyn frameworks have stricter requirements.

npx react-native@latest init StaticFrameworks --version latest --skip-install
cd StaticFrameworks
yarn install
cd ios
bundle install
USE_FRAMEWORKS=static NO_FLIPPER=1 bundle exec pod install
open StaticFrameworks.xcworkspace

and then ⌘+B, it works properly.

[birdofpreyru]

@cipolleschi I think I bumped into the same issue https://github.com/react-native-webview/react-native-webview/issues/3263 when building a project using react-native-webview with iOS / RN v0.73 / New Arch. Using Yarn, no expo.

[birdofpreyru]

And the project I was building is this one: https://github.com/birdofpreyru/react-native-static-server/tree/master, more specifically its Example App: https://github.com/birdofpreyru/react-native-static-server/tree/master/example

[evelant]

@cipolleschi This same issue has happened in previous releases. I had a PR for 0.72 that fixed it then. It seems like it just keeps creeping back in due to the way cocoapods handles symlinks when given a relative path in a podfile. See the older PR here https://github.com/facebook/react-native/pull/38158 and an explanation of the problem here https://github.com/facebook/react-native/issues/38140#issuecomment-1615082380

It would be great if pnpm could be added to the automated tests. It should require zero extra setup. Just substitute yarn or npm for pnpm, that's all.

[cipolleschi]

yeah, i remember. But we had to revert those changes because they were failing on other test cases, now I don't remember the specifics, unfortunately, as some weeks has passed. :(

[heath-clink]

I've observed something very similar with lottie-react-native. I made a simple repro: https://github.com/heath-clink/rn73-lottie-repro

See also: https://github.com/lottie-react-native/lottie-react-native/issues/1138

[NickGerleman]

For folks maintaining webview and lottie Fabric native components, does the problem go away if you add install_modules_dependenciesas referenved here make the issue go away? https://reactnative.dev/docs/the-new-architecture/pillars-fabric-components#ios-create-the-podspec-file

[NickGerleman]

https://github.com/facebook/react-native/commit/33ebb5d6365c3dd5d5214afc42c373d265280e27 made changes to Yoga header structure with new architecture. There is a lot of manual finagling of header search paths happening right now.

[cipolleschi]

I think there are different problems:

• The problem highlighted by @evelant is due to pnpm and the relative patch that are specified in the podspecs, which stops working correctly with some pnpm setups
• The problem highlighted by react-native-webview and lottie should be solved using install_modules_dependenciesas as @NickGerleman suggested. I'll fix those on Monday as I fixed several libraries already. Notice that they will require a new release of the two libs, anyway.

[cipolleschi]

For webview, there is already a PR pending with the fixes: https://github.com/react-native-webview/react-native-webview/pull/3231/files

[cipolleschi]

I created the PR for Lottie as well: https://github.com/lottie-react-native/lottie-react-native/pull/1139

[Johan-dutoit]

I too am experiencing this with nx as my monorepo setup, with yarn. Started as soon as I added use_frameworks! :linkage => :static to my podfile (required by firebase).

Using the bare RN flow and latest version (0.73.1)

[cipolleschi]

Monorepo setup are not officially supported, unfortunately. We haven't figured out a proper way to handle them. In monorepo setup the problems are likely to be the various relative path we have in the podspecs. In the Yoga.podspec we have a few of them.

Monorepo setups put those files in different paths w.r.t. the standard setup, and the podspecs layout is not handling that case.

[joaoveronezi]

I'm creating a "SDK", using cocoapods lib create.

I'm having this issue:

Here is my podfile:

`platform :ios, '13.4'

source 'https://github.com/jveronezi/sdk-specs.git' source 'https://github.com/CocoaPods/Specs.git'

use_frameworks! target 'TestingSDK' do pod 'SdkPod', '0.1.3' end `

---

This is my Yoga.podspec.json { "name": "Yoga", "version": "1.14.1", "license": { "type": "MIT" }, "homepage": "https://yogalayout.com", "documentation_url": "https://yogalayout.com/docs/", "summary": "Yoga is a cross-platform layout engine which implements Flexbox.", "description": "Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API many designers are familiar with, and opening it up to developers across different platforms.", "authors": "Facebook", "source": { "git": "https://github.com/facebook/react-native.git", "tag": "v0.73.1" }, "module_name": "Yoga", "header_dir": "Yoga", "requires_arc": false, "pod_target_xcconfig": { "DEFINES_MODULE": "YES" }, "compiler_flags": [ "-fno-omit-frame-pointer", "-fexceptions", "-Wall", "-Werror", "-std=c++17", "-fPIC" ], "platforms": { "ios": "13.4" }, "source_files": "packages/react-native/ReactCommon/yoga/yoga/**/*.{cpp,h}", "header_mappings_dir": "yoga", "public_header_files": "ReactCommon/yoga/yoga/{Yoga,YGEnums,YGMacros,YGNode,YGStyle,YGValue}.h", "private_header_files": [ "packages/react-native/ReactCommon/yoga/yoga/Yoga-internal.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/Align.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/BoundAxis.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.h", "packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h", "packages/react-native/ReactCommon/yoga/yoga/bits/BitCast.h", "packages/react-native/ReactCommon/yoga/yoga/bits/NumericBitfield.h", "packages/react-native/ReactCommon/yoga/yoga/config/Config.h", "packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h", "packages/react-native/ReactCommon/yoga/yoga/debug/Log.h", "packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Align.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Dimension.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Direction.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Display.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Edge.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h", "packages/react-native/ReactCommon/yoga/yoga/enums/ExperimentalFeature.h", "packages/react-native/ReactCommon/yoga/yoga/enums/FlexDirection.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Gutter.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Justify.h", "packages/react-native/ReactCommon/yoga/yoga/enums/LogLevel.h", "packages/react-native/ReactCommon/yoga/yoga/enums/MeasureMode.h", "packages/react-native/ReactCommon/yoga/yoga/enums/NodeType.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Overflow.h", "packages/react-native/ReactCommon/yoga/yoga/enums/PositionType.h", "packages/react-native/ReactCommon/yoga/yoga/enums/PrintOptions.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Unit.h", "packages/react-native/ReactCommon/yoga/yoga/enums/Wrap.h", "packages/react-native/ReactCommon/yoga/yoga/enums/YogaEnums.h", "packages/react-native/ReactCommon/yoga/yoga/event/event.h", "packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h", "packages/react-native/ReactCommon/yoga/yoga/node/LayoutResults.h", "packages/react-native/ReactCommon/yoga/yoga/node/Node.h", "packages/react-native/ReactCommon/yoga/yoga/numeric/Comparison.h", "packages/react-native/ReactCommon/yoga/yoga/numeric/FloatOptional.h", "packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h", "packages/react-native/ReactCommon/yoga/yoga/style/Style.h" ], "preserve_paths": ["ReactCommon/yoga/yoga/**/*.h"] }

---

Xcode Yoga target build phases

[cipolleschi]

You should not use cocoapods lib create to create a library for react-native. Cocoapods is the tool we use but the base use case is to create a lib for a standard iOS project.

For React Native, there is much more running under the hoods. The tool you should use to create a library compatible with React Native is Bob that will properly setup the podspec and the whole folder structure for you.

It will also create an Example folder with a React Native sample app that you can use to test your library.

[Nasseratic]

Monorepo setup are not officially supported, unfortunately. We haven't figured out a proper way to handle them. In monorepo setup the problems are likely to be the various relative path we have in the podspecs. In the Yoga.podspec we have a few of them. Monorepo setups put those files in different paths w.r.t. the standard setup, and the podspecs layout is not handling that case.

Any way we can get around this? why use_frameworks! :linkage => :static is causing this to monorepo setup? as I understand from the thread it works without it?

[cipolleschi]

The problem is that use_frameworks changes how the files are arranged in the disk after pod install run. Frameworks must follow a very specific structure:

FrameworkName
'-> Headers
    '-> headerA.h
    '-> headerB.h
'-> ImplementationA.m
'-> PrivateHeaderC.h

While static libraries doesn't.

On top of that, Monorepos usually moves the whole frameworks in a different location and uses symlinks to connect the expected position on disk to the monorepo location.

Those links get broken in our current setup. The specific details of what get broken depend on the monorepo that is used, but what I saw happening is that, with use frameworks, not all the symlink are set up correctly and that broke it.

[Nantris]

Same issue here.

I see it's mentioned that monorepos aren't officially supported, but also I saw this comment which says symlinks are stable in 0.73. What other challenges remain for monorepos? I sort of expected the support for symlinks to remedy this problem.

[enchorb]

Getting this issue in an Nx monorepo

Related: https://github.com/nrwl/nx/issues/20115

[cipolleschi]

@Slapbox symlink is stable for Metro, but not for the whole framework. My colleague that worked on simlinks for metro is now tackling monorepo scenarios, so, hopeful, we are going to have them working soon.

[birdofpreyru]

@cipolleschi my app fails to be archived for macOS (Catalyst) release with the seemingly similar error:

at the same time it builds and works fine if I just build it in release or debug mode to run locally on macOS, and it also works fine for iOS (both local builds & archiving for Apple.Store release). I am a bit lost in this thread, thus maybe you can hint me please, how to fix / temporary workaround it? I am not using expo; I am using npm; and I have use_frameworks! :linkage => :static in my podspec.

P.S.: I mean, I figured out I can just ad-hoc edit path includes in the pod source code, to make the build pass... which I guess works as a workaround, but might there be an easier method?

[joaoveronezi]

I solved my issue by going into the podspec.json and fixing the paths

[Johan-dutoit]

I solved my issue by going into the podspec.json and fixing the paths

@joaoveronezi Can you please share the changes here?

[joaoveronezi]

@Johan-dutoit sure. But I had to make a lot of changes.

The thing is, generally this error occurs when the XCODE can't find the header path or something like that.

If you are creating just a React native app, without making any changes, and using it along with node_modules and all the support files, those issues probably won't appear. However, if you are creating a Bridge, like me, that only uses .podspecs.json to install the pods, you need to make some changes.

The first thing I did was change the Yoga version from 1.14.0 to 1.14.1. The second one was adjusting all the paths on my .podspec.json:

{
  "name": "Yoga",
  "version": "1.14.1",
  "license": {
    "type": "MIT"
  },
  "homepage": "https://yogalayout.com",
  "documentation_url": "https://yogalayout.com/docs/",
  "summary": "Yoga is a cross-platform layout engine which implements Flexbox.",
  "description": "Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API many designers are familiar with, and opening it up to developers across different platforms.",
  "authors": "Facebook",
  "source": {
    "git": "https://github.com/facebook/react-native.git",
    "tag": "v0.73.1"
  },
  "module_name": "Yoga",
  "header_dir": "Yoga",
  "requires_arc": false,
  "pod_target_xcconfig": {
    "DEFINES_MODULE": "YES"
  },
  "compiler_flags": [
    "-fno-omit-frame-pointer",
    "-fexceptions",
    "-Wall",
    "-Werror",
    "-std=c++20",
    "-fPIC"
  ],
  "platforms": {
    "ios": "13.4"
  },
  "source_files": "packages/react-native/ReactCommon/yoga/yoga/**/*.{cpp,h}",
  "header_mappings_dir": "packages/react-native/ReactCommon/yoga/yoga",
  "public_header_files": "packages/react-native/ReactCommon/yoga/yoga/{Yoga,YGEnums,YGMacros,YGValue}.h",
  "private_header_files": [
    "packages/react-native/ReactCommon/yoga/yoga/Yoga-internal.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/Align.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/BoundAxis.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexDirection.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.h",
    "packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h",
    "packages/react-native/ReactCommon/yoga/yoga/bits/BitCast.h",
    "packages/react-native/ReactCommon/yoga/yoga/bits/NumericBitfield.h",
    "packages/react-native/ReactCommon/yoga/yoga/config/Config.h",
    "packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h",
    "packages/react-native/ReactCommon/yoga/yoga/debug/Log.h",
    "packages/react-native/ReactCommon/yoga/yoga/debug/NodeToString.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Align.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Dimension.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Direction.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Display.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Edge.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Errata.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/ExperimentalFeature.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/FlexDirection.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Gutter.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Justify.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/LogLevel.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/MeasureMode.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/NodeType.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Overflow.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/PositionType.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/PrintOptions.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Unit.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/Wrap.h",
    "packages/react-native/ReactCommon/yoga/yoga/enums/YogaEnums.h",
    "packages/react-native/ReactCommon/yoga/yoga/event/event.h",
    "packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h",
    "packages/react-native/ReactCommon/yoga/yoga/node/LayoutResults.h",
    "packages/react-native/ReactCommon/yoga/yoga/node/Node.h",
    "packages/react-native/ReactCommon/yoga/yoga/numeric/Comparison.h",
    "packages/react-native/ReactCommon/yoga/yoga/numeric/FloatOptional.h",
    "packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h",
    "packages/react-native/ReactCommon/yoga/yoga/style/Style.h"
  ],
  "preserve_paths": ["packages/react-native/ReactCommon/yoga/yoga/**/*.h"]
}

If you noticed, I added "packages/react-native" to every path we have, because that's where the files are (in react-native github)

[birdofpreyru]

@joaoveronezi I might be missing something, but for me changing the .podspec.json makes no difference — if I just do it, the Archive still fails, if I run pod update after doing it — the file is reset to its initial form. I only could pass the Archive if I go around all Yoga source and replace all include paths by relative ones... which works, but is very tedious.

[cnorman1977]

Banged my head against this for a couple of days - it seems that if I update the :path => to point to the monorepo root folder everything builds fine. For reference this is in an NX monorepo using React Native 0.73.2

  use_react_native!(
    :path => "../../#{config[:reactNativePath]}"
.... remaining settings ....
)

Not had chance to review the full functionality of our app yet, but the build is successful and at first glance everything seems to work.

[shubhransh-gupta]

For me, it worked when I tried with pod version 1.14.3. The issue is with Subpath of the node for pod In symlinking I dont know but somehow with this version the linking of private headers points to $(PRIVATE_HEADERS_FOLDER_PATH)/node. Previously i was using pod 1.15.0 and headers were pointing to the linkage destinations.