🐛 CMake Error: REACT_NATIVE_UTILS_LIB set to NOTFOUND

[chiubaka]

What were you trying to do?

Build my RN app on the Android emulator to prototype with frame processors.

Note: I checked the Expo box below. I'm running Expo bare, having ejected from Expo managed awhile back.

What happened instead?

Gradle build failed with a CMake error when trying to finish tasks for VisionCamera.

Relevant log output

/Users/dchiu/Developer/midana/client/node_modules/react-native-vision-camera/android/CMakeLists.txt : C/C++ debug|x86 : CMake Error: The following variables are used in this project, but they are set to NOTFOUND.
Please set them or make sure they are set and tested correctly in the CMake files:
REACT_NATIVE_UTILS_LIB
    linked by target "VisionCamera" in directory /Users/dchiu/Developer/midana/client/node_modules/react-native-vision-camera/android

Device

Emulated Pixel 4 running API 30

VisionCamera Version

2.4.2-beta.9

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[mrousavy]

Hey! Thanks for the bug report.
Could you try opening the CMakeLists.txt file in node_modules/react-native-vision-camera and remove all references to REACT_NATIVE_UTILS_LIB? That only exists for RN 0.64+, and I am not sure if I even need that lib.

react-native-vision-camera/android/CMakeLists.txt

Line 129 in 01104e0

${REACT_NATIVE_UTILS_LIB}

[chiubaka]

Cool! I think that solved the initial build issue.

Seems like something in the build configuration (probably Hermes?) is messing with a very delicate part of my app, though, so that's preventing me from easily confirming that the camera component is working properly.

I'll let you know if this worked for me once I get past that.

For reference, I'm on react-native ~0.63.4.

[chiubaka]

Not totally relevant, but this is the exact issue currently preventing me from making this work: facebook/hermes#114

My app injects JS into WebViews and Hermes appears to have changed the way that calling toString() on a function behaves. My design is inherently brittle, unfortunately, but the WebView is powering registration / login flows so is critical and writing long scripts directly as strings is hard to maintain so I've been trying to avoid that route.

[mrousavy]

I don't think I fully understand, are you having a problem with Hermes? If so, why are you not just using JSC then? Also there have been some changes with the Function.toString() function lately, you could try building Hermes from source from their current master.

[chiubaka]

Oh, sorry! Should have clarified. The only reason my project has Hermes turned on at all is because that was a step described in React Native Reanimated v2's installation guide. And my project only uses React Native Reanimated because that's the backing for Frame Processors.

Hermes is specifically showing [bytecode] for the body of strings when calling toString() on them, which raises errors when injected into a WebView haha.

[mrousavy]

REA also works with JSC! Try disabling hermes if that's a problem for you

[Huxpro]

@chiubaka

Hermes is specifically showing [bytecode] for the body of strings when calling toString() on them, which raises errors when injected into a WebView haha.

Hermes, started from 0.8.1, adds a special directive "show source" to make toString returning original source code for this use case. Would you mind try it with React Native 0.65-rc.3? You can find more details at facebook/hermes#114 (comment)

[mrousavy]

Hey @Huxpro, nice to see you here!

Does JS support using multiple directives at once? So I just write them like

"use strict"
"worklet"
"show source"
...

?

[Huxpro]

@mrousavy yup, directive prologue is a sequence of directives (i.e. kleene star) ;)

[chiubaka]

Oh that's awesome! Appreciate the support on all of this. Will give these things a try :)