Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Error when using frameProcessor on iOS (V3 - RN 0.72.4) #1776

Closed
4 of 6 tasks
fedpre opened this issue Sep 6, 2023 · 51 comments
Closed
4 of 6 tasks

🐛 Error when using frameProcessor on iOS (V3 - RN 0.72.4) #1776

fedpre opened this issue Sep 6, 2023 · 51 comments
Labels
🐛 bug Something isn't working

Comments

@fedpre
Copy link

fedpre commented Sep 6, 2023

What's happening?

I want to use the frame processor on iOS, but I get this error

Reproduceable Code

<Camera
          style={{flex: 1}}
          device={device}
          isActive={isFocused}
          onError={onError}
          onInitialized={onInitialized}
          photo={true}
          video={true}
          ref={camera}
          enableZoomGesture={true}
          frameProcessor={frameProcessor}
        />

Relevant log output

libc++abi: terminating with uncaught exception of type facebook::jsi::JSINativeException: Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29

Camera Device

No response

Device

iPhone X

VisionCamera Version

3.0.0

Can you reproduce this issue in the VisionCamera Example app?

  • I can reproduce the issue in the VisionCamera Example app.

Additional information

@fedpre fedpre added the 🐛 bug Something isn't working label Sep 6, 2023
@akshay8033
Copy link

@fedpre I ran into the same crash issue downgraded RN to 0.72.3 and worked fine. Used the same versions as vision-camera example app.

@metrix-hu
Copy link
Contributor

I have the same problem on Android too, but downgrading RN did not work for me 🙁

@fedpre
Copy link
Author

fedpre commented Sep 6, 2023

Same downgrading didn't fix it

@akshay8033
Copy link

Are you able to run the example project?

@mrousavy
Copy link
Owner

mrousavy commented Sep 6, 2023

Did you try to clean babel cache? looks like a Worklets issue? Is Reanimated installed?

@metrix-hu
Copy link
Contributor

@mrousavy For now I always restart metro with --reset-cache flag. I have installed the latest nightly of reanimated because previous versions did not work, I got a weird typescript error which I could not resolve.

@fedpre
Copy link
Author

fedpre commented Sep 6, 2023

Did you try to clean babel cache? looks like a Worklets issue? Is Reanimated installed?

@mrousavy Yes, yes, and yes. The weird thing is that the preview is working (I see the image captured) but everything else is frozen and I can't do anything.

@fedpre
Copy link
Author

fedpre commented Sep 6, 2023

@mrousavy For now I always restart metro with --reset-cache flag. I have installed the latest nightly of reanimated because previous versions did not work, I got a weird typescript error which I could not resolve.

Were you able to make it work this way?

@metrix-hu
Copy link
Contributor

@fedpre Unfortunately not. I just wanted to stated my scenario, but I had no luck with making it work.

@Zuxelus
Copy link

Zuxelus commented Sep 9, 2023

Had the same error here. After removing packages (changing to older versions) and adding several new "@babel/..." dev packages it was disappeared. Seems that some packages have problems with ES standards in JS code.

@jbohman
Copy link

jbohman commented Sep 9, 2023

@Zuxelus I'm having the same issue, what packages did you remove and what babel packages did you add?

@jbohman
Copy link

jbohman commented Sep 10, 2023

libc++abi: terminating with uncaught exception of type facebook::jsi::JSINativeException: Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29

Only happens in iOS release build, not debug build for me.

@jess-hwang
Copy link

react-reanimated 3.4.0 and 3.4.1 have some problems.
upgrade react-reanimated

@manolo-battista
Copy link

manolo-battista commented Sep 12, 2023

I can confirm that happens in release build and not on debug (both android and ios), I upgrade last releases of @babel/..., react-reanimated 3.4.2 and react-native 0.72.4, clean all project and metro, but I can't resolve it.

Screenshots

Screenshot 2023-09-12 alle 19 22 30

image

@Zuxelus
Copy link

Zuxelus commented Sep 12, 2023

Could somebody try to disable hermes in android\gradle.properties (hermesEnabled=false) and share the real error because I had only one Android device and for unknown reason I cannot reproduce this error any more?

@manolo-battista
Copy link

manolo-battista commented Sep 12, 2023

Could somebody try to disable hermes in android\gradle.properties (hermesEnabled=false) and share the real error because I had only one Android device and for unknown reason I cannot reproduce this error any more?

Android

I tried to disable hermes on gradle.properties, application not crash with JSINativeException: Compiling JS failed exception 👍🏻 , but it seems camera don't show anything and show Frame Processor threw an error: Unexpected token ')' error.

Screenshot 2023-09-12 alle 21 42 07

iOS

On iOS with hermes disabled on Podfile, application not crash on release. Camera works, but seems frameProcessor doesn't work, on logs still Frame Processor threw an error: Unexpected token ')' error.

@Zuxelus do you try to check it in release mode?

@Zuxelus
Copy link

Zuxelus commented Sep 12, 2023

I don't have this error even if I install an app_release.apk. But if send this file to someone else they have an error.

Go back to issue. "invalid empty parentheses" is just an internal hermes message. Without hermes you get correct JS error.
Try to get the whole JS bundle code and check for something like this
On my android bundle is on http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false

How to get bundle
https://stackoverflow.com/questions/54639875/how-can-i-view-the-javascript-bundle-code-in-react-native

@mrousavy
Copy link
Owner

This might be a Reanimated issue. Can you guys reproduce this without reanimated?

@manolo-battista
Copy link

This might be a Reanimated issue. Can you guys reproduce this without reanimated?

Thanks a lot @mrousavy. I test it now, and yes ❤️ it seems a conficlit with reanimated. I remove all reanimated dependencies on my project, clean code and reinstall all pods and I can confirm that works on Debug and Release mode on iOS. I'll try on Android soon but I think it was the same problem.

I installed reanimated cause I saw that @shopify/react-native-skia has "react-native-reanimated": ">=2.0.0" as peer dependecy.

@justinmann
Copy link

justinmann commented Sep 14, 2023

I am hitting this issue and my project does not use reanimated.

package.json:
{
"name": "expo-app",
"version": "0.0.1",
"private": true,
"main": "index.ts",
"scripts": {
"android": "react-native run-android --mode devdebug",
"android-prod": "react-native run-android --mode productiondebug",
"android-teaser": "react-native run-android --variant=teaser --mode productiondebug",
"ios": "react-native run-ios --scheme Dev",
"ios-prod": "react-native run-ios --scheme Production",
"ios-teaser": "react-native run-ios --scheme Teaser AI",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-clipboard/clipboard": "^1.11.2",
"@react-native-community/blur": "^4.3.0",
"@react-native-firebase/analytics": "17.3.1",
"@react-native-firebase/app": "17.3.1",
"@react-native-firebase/auth": "17.3.1",
"@react-native-firebase/dynamic-links": "17.3.1",
"@react-native-firebase/firestore": "17.3.1",
"@react-native-firebase/functions": "17.3.1",
"@react-native-firebase/messaging": "17.3.1",
"@react-native-firebase/perf": "17.3.1",
"@react-native-firebase/remote-config": "17.3.1",
"@react-native-firebase/storage": "17.3.1",
"@react-native-google-signin/google-signin": "^9.0.2",
"@react-native-voice/voice": "https://github.com/DispoHQ/voice#0de57627fb3a8f3cfbce710689b1d60200f150de",
"@types/object-hash": "^3.0.2",
"app": "*",
"appcenter": "4.4.5",
"appcenter-analytics": "4.4.5",
"appcenter-crashes": "4.4.5",
"expo": "^48.0.6",
"expo-av": "~13.2.1",
"expo-build-properties": "^0.5.1",
"expo-face-detector": "^12.1.1",
"expo-image-manipulator": "^11.1.1",
"expo-intent-launcher": "^10.5.2",
"expo-localization": "^14.1.1",
"expo-location": "~15.0.1",
"expo-mail-composer": "~12.1.1",
"expo-speech": "~11.1.1",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-animated-pagination-dots": "^0.1.73",
"react-native-date-picker": "^4.2.9",
"react-native-device-info": "^10.6.0",
"react-native-draggable-grid": "https://github.com/DispoHQ/react-native-draggable-grid#ddc356619c86451c3d9fb4e595d982479caaff9c",
"react-native-email-link": "^1.14.7",
"react-native-fast-image": "^8.6.3",
"react-native-fbsdk-next": "^11.2.1",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.6.0",
"react-native-gifted-chat": "^1.1.1",
"react-native-haptic-feedback": "^2.0.3",
"react-native-image-picker": "5.4.0",
"react-native-logs": "5.0.1",
"react-native-maps": "1.4.0",
"react-native-progress": "^5.0.0",
"react-native-purchases": "^5.10.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-shake": "^5.3.2",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.8.0",
"react-native-text-size": "https://github.com/DispoHQ/react-native-text-size#893356b8520ffd29dad4bce6f3e5d47689381bc9",
"react-native-tracking-transparency": "^0.1.2",
"react-native-virtualized-view": "^1.0.0",
"react-native-vision-camera": "^3.0.0",
"react-native-volume-manager": "^1.10.0",
"react-native-web": "~0.18.7",
"react-native-web-maps": "0.3.0",
"react-native-worklets-core": "^0.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@stdlib/nlp-expand-contractions": "^0.0.8",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-native-background-timer": "^2.0.0",
"@types/react-test-renderer": "^18.0.0",
"@welldone-software/why-did-you-render": "^7.0.1",
"babel-jest": "^29.2.1",
"blurhash": "^2.0.5",
"eslint": "^8.19.0",
"expo-face-detector": "^12.1.1",
"expo-mail-composer": "^12.1.1",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.8",
"prettier": "^2.4.1",
"react-native-appsflyer": "^6.12.1",
"react-native-background-timer": "^2.4.1",
"react-native-blurhash": "https://github.com/konroj/react-native-blurhash#web",
"react-native-dotenv": "^3.4.8",
"react-native-flip-card": "^3.5.7",
"react-native-in-app-review": "^4.3.3",
"react-native-localize": "^3.0.0",
"react-native-splash-screen": "^3.3.0",
"react-native-webview": "^13.5.1",
"react-test-renderer": "18.2.0",
"typescript": "5.0.2"
},
"jest": {
"preset": "react-native"
},
"resolutions": {
"expo-constants": "14.2.1"
}
}

@mendesbarreto
Copy link

mendesbarreto commented Sep 16, 2023

Hello @fedpre + @justinmann

I encountered two issues while using this library, but when I initiated a new project from scratch, I managed to make it work. You can check out my TEMPLATE to see if it helps.

the other issue that I fixed start again was this one #1804.

The project has two logs the frame info and the pixel buff:
Screenshot 2023-09-15 at 8 01 33 PM

@matthewrothery
Copy link

I have seen the log message libc++abi: terminating with uncaught exception of type facebook::jsi::JSINativeException: Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 in XCode for React Native 0.72.4 as mentioned. Quite annoying as it prevents custom frame processors.

The error appears to be in the react-native-worklets-core version 0.2.0 package. Seems like properties on the jsi::Function have changed to a double underscore, as observed when outputting each available property from the decorated worklet. Other properties are references correctly, however the PropNameWorkletClosure remained to be _closure and not __closure.

Given that _closure does not exist, we can never retrieve the code that we need. As observed here.

image

Anyway, here is the patch for patch-package to resolve it. It is a renaming of _closure to __closure.

react-native-worklets-core+0.2.0.patch

@mrousavy
Copy link
Owner

@matthewrothery which Reanimated version do you use? I think this is an issue with Reanimated interop, as maybe you use the Reanimated 'worklet' babel plugin which uses _closure instead of __closure, but I think the latest version of Reanimated uses __closure as well (just like RN Worklets Core does).

@Zuxelus
Copy link

Zuxelus commented Sep 19, 2023

I created a totally new environment and was able to reproduce this error on Android Emulator. After adding the patch the error was fixed on emulator but when I made an assemble release the error was there. So I have this error on real device even with this patch. Tried 3 different versions of reanimated.

@matthewrothery
Copy link

@mrousavy I am using "react-native-reanimated": "3.5.1" "react-native-vision-camera": "3.0.0" "react-native-worklets-core": "0.2.0" . My Babel plugins are plugins: ['react-native-worklets-core/plugin', 'react-native-reanimated/plugin']. I had previously tried reanimated

@Zuxelus I should have added that I my fix was tested and worked for a physical ios device. I'll be diving into my custom frame processor for android today/tomorrow and will see if I have the same issue as you.

Given that there is a new version of react-native-reanimated and react-native-vision-camera, I'll likely update them as well.

@spector32
Copy link

Downgrading react-native-reanimated to version ~3.4.2 fixed it for me.

@mgcrea
Copy link

mgcrea commented Sep 22, 2023

This can happen without reanimated when you forget to add the plugin 'react-native-worklets-core/plugin' to your babel.config.js and tries to use a frameProcessor.

@salembaira
Copy link

Downgrading react-native-reanimated to version ~3.4.2 fixed it for me.

Was having issues with react-native 0.72.5 and react-native-vision-camera 3.1.0. Downgrading reanimated fixed it for me.

@mrousavy
Copy link
Owner

Hey - this should be fixed with the latest update in VisionCamera V3 (🥳) - if not, please create a new issue.

If your issue has been fixed, consider sponsoring me on GitHub to say thanks 💖

@abdalamichel
Copy link

The issue persisted on 3.2.2, fixing version of react-native-reanimated to ~3.4.2 fixed it for me.

@SimonJakubowski
Copy link

SimonJakubowski commented Oct 6, 2023

the issue still exists in release build. Dev build is working!

"react-native": "0.72.5",
"react-native-reanimated": "3.5.4",
"react-native-vision-camera": "3.3.1",
"react-native-worklets-core": "0.2.1",

if hermes is enabled the app crashes with

libc++abi: terminating with uncaught exception of type facebook::jsi::JSINativeException: Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29

if hermes is disables the app does not crash, but throw the following error when using a frameprocessor

[javascript] Frame Processor threw an error: Unexpected token ')'

In the release build

WKTJsiWorklet.h Line 277

if (locationProp.isUndefined() || locationProp.isNull() ||
          !locationProp.isString()) {
        return;
      }
// Set location
 _location = locationProp.asString(runtime).utf8(runtime);

locationProp is undefined and in the dev build it is defined. I have no idea how to resolve this.

Workaround to get a running release build is to comment out all lines above in WKTJsiWorklet.h

@rajdhakate-unacademy
Copy link

rajdhakate-unacademy commented Oct 6, 2023

Same error as above.

To reproduce:

  • run the Example app in Release configuration

Example app in Debug is working fine

@mrousavy
Copy link
Owner

mrousavy commented Oct 6, 2023

@SimonJakubowski hm, maybe we can check how Reanimated does this. I'd say if location is left out there is something wrong with the Babel plugin (either Worklets' or Reanimated's), or we can just fall back to not having location (which would suck since that doesnt have stacktraces then)

@fedpre
Copy link
Author

fedpre commented Oct 10, 2023

"react-native-reanimated": "3.4.2",
"react-native-vision-camera": "^3.3.1",
"react-native-worklets-core": "^0.2.2",
"react-native": "^0.72.5",

Still getting the same error when building (release mode) on physical device with Xcode 15. Is there a fix/workaround? I tried what was proposed above but with no luck.

@rajdhakate-unacademy
Copy link

rajdhakate-unacademy commented Oct 11, 2023

@fedpre Here is a workaround patch. Not sure of the consequences

Thanks to @SimonJakubowski

index 2c643b3..d8ce821 100644
--- a/node_modules/react-native-worklets-core/cpp/WKTJsiWorklet.h
+++ b/node_modules/react-native-worklets-core/cpp/WKTJsiWorklet.h
@@ -274,13 +274,13 @@ private:
       jsi::Value locationProp = initDataProp.asObject(runtime).getProperty(
           runtime, PropNameWorkletInitDataLocation);
 
-      if (locationProp.isUndefined() || locationProp.isNull() ||
-          !locationProp.isString()) {
-        return;
-      }
+      // if (locationProp.isUndefined() || locationProp.isNull() ||
+      //     !locationProp.isString()) {
+      //   return;
+      // }
 
-      // Set location
-      _location = locationProp.asString(runtime).utf8(runtime);
+      // // Set location
+      // _location = locationProp.asString(runtime).utf8(runtime);
 
       // Let us try to install the function in the worklet context
       _code = initDataProp.asObject(runtime)

react-native-worklets-core+0.2.1.patch

@chuans
Copy link

chuans commented Oct 11, 2023

"react-native": "0.72.3",
"react-native-reanimated": "~3.4.2",
"react-native-vision-camera": "^3.3.1",
"react-native-worklets-core": "^0.2.2",
I have the same problem. Have you solved it?

@rafaelmotta
Copy link

I also see this issue:

libc++abi: terminating due to uncaught exception of type facebook::jsi::JSINativeException: Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29

"react-native": "0.72.5",
"react-native-reanimated": "3.4.2",
"react-native-vision-camera": "^3.3.1",
"react-native-worklets-core": "^0.2.2",

@fedpre
Copy link
Author

fedpre commented Oct 12, 2023

The error is fixed with @SimonJakubowski patch. However, I would be curious to understand the repercussion of taking away that piece of code! Thanks @rajdhakate-unacademy to point that out I actually somehow missed that comment!

@mrousavy
Copy link
Owner

Hey @SimonJakubowski / @rajdhakate-unacademy - I think the ideal approach is to figure out how the new location prop is handled in reanimated? is it no longer called ._location? Can you try to inspect the Worklet and log it to figure out what it's new name is so I can fix this upstream? cc @chrfalch

Thanks.

@fedpre
Copy link
Author

fedpre commented Oct 12, 2023

@mrousavy Something a bit unrelated, after fixing the error, I tried to build a custom frame processor. Followed the latest guidelines, but it didn't work, meaning that the frame processor seemed not registered in the native side. Sure enough, I tried to change the +initialize back to +load and it started working, using Xcode 15. Not sure what's happening as I was one of the people having the defect with +load. However, just for reference, it wasn't working with +initialize when registering the frame processor. Thought you may be interested to know!

@mrousavy
Copy link
Owner

@fedpre Yea I suddenly received a lot of complaints after I changed that, could you maybe submit a PR targeting the v2 branch that changes this back to fix it upstream? Thank you!

@rafaelmotta
Copy link

I couldn't make my app work even after patching the worklets package. I noticed this happened after updating to iOS 17 / Xcode 15. Before, everything was working fine.

@mrousavy
Copy link
Owner

This is related: #1843 (comment)

Here's a sum up by @bglgwyng:

RNVC 3.2.2 + Reanimated 3.3.0 → Functioning properly
RNVC 3.2.2 + Reanimated 3.5.4 → Caused a crash
RNVC 3.4.0 + Reanimated 3.3.0 → Caused a crash
RNVC 3.4.0 + Reanimated 3.5.4 → Functioning properly

@xseignard
Copy link
Contributor

RNVC 3.4.1 + Reanimated 3.5.4 → Caused a crash

@bglgwyng
Copy link
Sponsor Contributor

@xseignard Did you use the latest react-native-worklets-core from github(https://github.com/margelo/react-native-worklets-core/tree/800cf1b2cc65704cf5dfbc725aef1ac1dff32481)?

@rafaelmotta
Copy link

I can confirm that the latest version of worklets works great for me (debug/release mode)

"react-native-worklets-core": "https://github.com/margelo/react-native-worklets-core.git#800cf1b2cc65704cf5dfbc725aef1ac1dff32481",

@xseignard
Copy link
Contributor

@rafaelmotta can you confirm it works on Android release? Have you tested with proguard enabled?

jtklein added a commit to inaturalist/SeekReactNative that referenced this issue Oct 24, 2023
This is a WIP:
It currently crashes on Android and iOS because of an incompatibility between Reanimated and worklets-core, in order to resolve this I think we would need to update to Reanimated v3 (latest).
mrousavy/react-native-vision-camera#1776
@yuraxdrumz
Copy link

I also had the Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 error.

I tried running RNVC v3.7.0 with react-native-worklets-core v0.2.4 and expo v49.

Expo v49 is currently running react-native-reanimated v3.3.0.

After upgrading manually to react-native-reanimated v3.6.1 and rebuilding project, frame processors started working.

Here are the steps I took:

  • yarn add react-native-reanimated@latest
  • npx expo prebuild --clean
  • npx expo run:android

Do not run expo install --fix because it will downgrade the react-native-reanimated back to v3.3.0

@mrousavy
Copy link
Owner

Seems like the babel plugin didnt transpile the worklet properly.

@mostasim
Copy link

mostasim commented Apr 9, 2024

FYI, if anyone is having this issue in RNVC v4 beta, try using this library combination which works for me.
react-native-reanimated 3.5.4
react-native-worklets-core0.2.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests