Yoga error building React Native from source

Question

I'm trying to build React Native from source to use some changes I made to its Camera Roll functions. I've followed the guide for how to do that, but I'm running into some downright arcane errors when trying to compile the whole thing.

Here's the whole pile:

[armeabi-v7a] Compile++ thumb: yogacore <= Utils.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGEnums.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGNodePrint.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGNode.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= Yoga.cpp

C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGEnums.cpp:228:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGEnums.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGEnums.o] Error 1
make.exe: *** Waiting for unfinished jobs....

[armeabi-v7a] StaticLibrary  : libreactnative.a

C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGNodePrint.cpp:227:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNodePrint.o.d: No such file or directory
 } // namespace facebook
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNodePrint.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/Utils.cpp:31:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Utils.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Utils.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGNode.cpp:668:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNode.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNode.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/Yoga.cpp:3493:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Yoga.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Yoga.o] Error 1

make.exe: Leaving directory `C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/src/main/jni/react/jni'
:ReactAndroid:buildReactNdkLib FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':ReactAndroid:buildReactNdkLib'.
> Process 'command 'C:\Users\jon-g\AppData\Local\Android\Ndk\android-ndk-r10e\ndk-build.cmd'' finished with non-zero exit value 2

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

None of this makes much sense to me. These file paths are entirely ridiculous.

Why is this happening? How do I get this to compile?

Answer 1

The issue is embroiled in the windows MAX_PATH limitation.

In the Windows API ... the maximum length for a path is MAX_PATH, which is defined as 260 characters.

This happens because of recent changes that build yoga as a module, instead of simply including it as a library. When building a module the NDK toolkit converts the relative path of the module source to an absolute path, and appends that to the gradle project buildDir so that the build can be absolutely, and uniquely identified.

When your project builds ReactAndroid, the buildDir is C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\, and the relative path to the yogacore source from the projectRoot is ../ReactCommon/yoga/yoga/.

Add it all up with some contextual info about the build (..\tmp\buildReactNdkLib\local\armeabi-v7a\..) and you get the paths you're seeing above from having a relatively common project path (c:\Users\[username]\OneDrive\[projectName]). A path length of 437 characters for YGNodePrint.o.d.

How do we fix this? Well, your first thought may be that you have the Windows 10 Anniversary Update, and you should just enable LongPathSupport

In the Registry Editor, use the left sidebar to navigate to the following key:

 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem 

[and set the LongPathsEnabled value to 1]

This is by far the simplest solution, but it absolutely will not work. Most of the tools in the android-ndk-r10e toolchain that react-native uses cannot properly interpret paths of more than 260 characters. I don't have a thick enough beard to comprehend the hierarchy of the android cross compiler toolchain, but it would appear they realize that most of the tools fail in this respect even in the most recent revisions, and fixing it does not appear to be trivial.

SO - what I recommend, is to simply follow the directions on the Building React Native from Source page. While they're concerned with not obliterating the cache, we're concerned with shortening the build path.

...you might want to change your build directory path by editing the ~/.gradle/init.gradle file:

 gradle.projectsLoaded {
     rootProject.allprojects {
         buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
     }
 }

Set it to something short, and it may work. If not, you have to move your kulaapp path closer to the root.

-OR-

If you're feeling particularly 133t today you could try to build the react-native framework separately using the :ReactAndroid:installArchives task so your build can just fetch your shiny new react artifact from mavenlocal(). (This was the first thing I tried. It's not trivial and not recommended. No one on your team will like you.)

Answer 2

In Android, i fixed this error by doing the following:

First you need to make sure you setup your NDK enviroment correctly: https://facebook.github.io/react-native/docs/building-from-source.html

Make sure your environment variable ANDROID_NDK path and ndk.dir=C\:\\Users\\jb\\android-ndk\\android-ndk-r10e (local.properties) are configured correctly.

After that, in the Top level Gradle of your project add this line where you reference your React Native project location:

allprojects {
    repositories {
        buildDir = "G:\\ReactNativ\\MyReactNativeProjectApp\\etc.."
        mavenLocal()
        jcenter()
    }
}

Delete your build folders in the android folders, then do a clean build.

Answer 3

Append following in Podfile: (Ref: facebook/yoga#711)

def fix_cplusplus_header_compiler_error
    filepath = '../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[32].include? "&"
        contents.insert(26, "#ifdef __cplusplus")
        contents[36] = "#endif"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def fix_unused_yoga_headers
    filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[12].include? "Utils.h"
        contents.delete_at(15) # #import "YGNode.h"
        contents.delete_at(15) # #import "YGNodePrint.h"
        contents.delete_at(15) # #import "Yoga-internal.h"
        contents.delete_at(12) # #import "Utils.h"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def react_native_fix
    fix_cplusplus_header_compiler_error
    fix_unused_yoga_headers
end

post_install do |installer|
    react_native_fix
end

And modify package.json to fix fishhook error: (Ref: facebook/react-native#16039)

"scripts": {
    "postinstall": "sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m"
}

Related PR: facebook/react-native#18492.