Error setting up sample project from scratch #9

kbhokray · 2022-09-08T09:16:17Z

The library crashes on start with the below error when setup from scratch with react-native@0.65.2 and @babylonjs/react-native-iosandroid-0-65 on Android. I have checked on emulators Pixel 2 API 29 and Pixel XL API 31. Cloning this repo and running it works without a problem. But when I remove package-lock.json and run, it starts breaking again

Error:

Unexpected token '='
no stack

Android error stack:

2022-09-08 14:40:56.471 17190-17307/com.babylon65 E/unknown:ReactNative: Exception in native call from JS
    com.facebook.react.devsupport.JSException: Unexpected token '='
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:214)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:919)
     Caused by: com.facebook.jni.CppException: Unexpected token '='
    
    no stack
    	... 7 more

To Reproduce
Follow the setup steps in the sample repo

> react-native init babylon65 --version 0.65
> cd babylon65
> npm i --save @babylonjs/react-native @babylonjs/react-native-iosandroid-0-65 @babylonjs/core @babylonjs/loaders react-native-permissions@3.0.0
> npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
> vi tsconfig.json #Copy the config from the repo
> vi jest.config.js #Copy the config from the repo
> mv App.js App.tsx
> vi App.tsx #Copy App.tsx from [the repo](https://github.com/BabylonJS/BabylonReactNativeSample/blob/main/App.tsx)
> npm start
> npm run android

Alternatively, following the below steps also gives the same error

git clone https://github.com/BabylonJS/BabylonReactNativeSample.git
cd BabylonReactNativeSample
rm package-lock.json
npm install
npm start
npm run android

Repo with the error-ing package-lock.json for reference:

git clone https://github.com/kbhokray/babylon65
npm install
npm start
npm run android

Expected behavior
The application should run without an error

Screenshots

Other

Platform: Android
nodejs v16.17.0 (also checked with v14.17.0)

Since it looks like it's a babel error, I also tried adding the below in babel.config.js as mentioned in babel's repo. Even that doesn't seem to work

module.exports = {
   presets: [['module:metro-react-native-babel-preset', {
        unstable_disableES6Transforms: true
    }]],
};

The text was updated successfully, but these errors were encountered:

SergioRZMasson · 2022-09-19T14:13:30Z

Hi @kbhokray, sorry for the late reply.

I'm not been able to repro this... Can you share a little more information about your development environment? Which OS are you using?

kbhokray · 2022-09-19T14:27:02Z

Hi @SergioRZMasson I'm running it on Ubuntu 18.04. Can you please try the below steps for repro?

git clone https://github.com/kbhokray/babylon65
npm install
npm start
npm run android

More details:

node: v16.17.0
npm: 8.15.0
Emulator Hardware: Pixel 2 (I tried on other hardwares as well)
Emulator System Image: Q (API Level 29) Android 10.0 x86

SergioRZMasson · 2022-09-19T14:30:02Z

Thanks @kbhokray ! I will try to repro those steps on Ubuntu 18.04.

thangld322 · 2022-09-22T10:50:58Z

Any update please? I have the same issue on Ubuntu 22.04.1

SergioRZMasson · 2022-09-22T16:48:38Z

@thangld322 , I haven't had a chance to try it yet, I will get to it as soon as possible. One thing you might try is using react native 0.69. We have a branch on this repo called react-natiive-0-69, can you try using it as seen if you continue getting the issue?

thangld322 · 2022-09-29T07:30:25Z

I tried react-native-0-69 and it built successful but I cannot open the app on my Pixel_4_API_30 Emulator. Not sure why.

thangld322 · 2022-09-29T07:45:51Z

Oh I missed the part where I need to config uses-permission in AndroidManifest.xml
It works on branch react-native-0-69 now. Thank you!

kbhokray · 2022-09-29T17:31:23Z

@thangld322 Can you please tell the npm and node version you're using? When I try to run the 0.69 branch, it breaks with the below error even with Pixel4 API 30 Emulator

2022-09-29 22:57:38.227 8537-8600/com.babylonreactnativesample E/AndroidRuntime: FATAL EXCEPTION: mqt_js
    Process: com.babylonreactnativesample, PID: 8537
    java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_Unwind_Resume" referenced by "/data/app/com.babylonreactnativesample-OuvSxmxncDJB8jPH8Pjvig==/lib/x86/libBabylonNative.so"...
        at java.lang.Runtime.loadLibrary0(Runtime.java:1071)
        at java.lang.Runtime.loadLibrary0(Runtime.java:1007)
        at java.lang.System.loadLibrary(System.java:1667)
        at com.babylonreactnative.BabylonNativeInterop$BabylonNative.<clinit>(BabylonNativeInterop.java:18)
        at com.babylonreactnative.BabylonNativeInterop$BabylonNative.initialize(Native Method)
        at com.babylonreactnative.BabylonNativeInterop.initialize(BabylonNativeInterop.java:41)
        at com.babylonreactnative.BabylonModule.lambda$initialize$0$com-babylonreactnative-BabylonModule(BabylonModule.java:25)
        at com.babylonreactnative.BabylonModule$$ExternalSyntheticLambda0.run(Unknown Source:4)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:214)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:919)

thangld322 · 2022-09-30T11:10:18Z

NPM: 8.11.0
Node: v16.15.1
@kbhokray My package.json

{
  "name": "BabylonReactNativeSample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@babylonjs/core": "^5.20.0",
    "@babylonjs/loaders": "^5.20.0",
    "@babylonjs/react-native": "^1.3.2",
    "@babylonjs/react-native-iosandroid-0-69": "^1.3.5",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-permissions": "^3.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-config": "^0.70.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

MykhailoButkevych-MR · 2022-10-03T08:49:31Z

Just tried branch with 0.69 rn - works on Android for me. No additional config has been required to run app.
Also I noticed that there's no react-native-permissions package.

npm: 8.1.2
node: 16.13.2

"dependencies": {
    "@babylonjs/core": "^5.20.0",
    "@babylonjs/loaders": "^5.20.0",
    "@babylonjs/react-native": "^1.3.2",
    "@babylonjs/react-native-iosandroid-0-69": "^1.3.2",
    "react": "18.0.0",
    "react-native": "0.69.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-config": "^0.70.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },

kbhokray · 2022-10-06T11:21:38Z

It still gives an error for me with the below versions

node: v16.15.1
npm: 8.11.0

And the below package.json

{
  "name": "BabylonReactNativeSample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@babylonjs/core": "^5.20.0",
    "@babylonjs/loaders": "^5.20.0",
    "@babylonjs/react-native": "^1.3.2",
    "@babylonjs/react-native-iosandroid-0-69": "^1.3.5",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-permissions": "^3.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-config": "^0.70.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Although this time the error seems to be different as per the logs below

2022-10-06 16:45:02.576 9696-9752/com.babylonreactnativesample E/AndroidRuntime: FATAL EXCEPTION: mqt_js
    Process: com.babylonreactnativesample, PID: 9696
    java.lang.UnsatisfiedLinkError: dlopen failed: library "libBabylonNative.so" not found
        at java.lang.Runtime.loadLibrary0(Runtime.java:1087)
        at java.lang.Runtime.loadLibrary0(Runtime.java:1008)
        at java.lang.System.loadLibrary(System.java:1664)
        at com.babylonreactnative.BabylonNativeInterop$BabylonNative.<clinit>(BabylonNativeInterop.java:18)
        at com.babylonreactnative.BabylonNativeInterop$BabylonNative.initialize(Native Method)
        at com.babylonreactnative.BabylonNativeInterop.initialize(BabylonNativeInterop.java:41)
        at com.babylonreactnative.BabylonModule.lambda$initialize$0$com-babylonreactnative-BabylonModule(BabylonModule.java:25)
        at com.babylonreactnative.BabylonModule$$ExternalSyntheticLambda0.run(Unknown Source:4)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:223)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:923)

I verified that Open GL ES3 is being used as suggested in this previous issue, but even that didn't help. For now I am able to run 0-64 version am using that. I'll update to 0.69 whenever I'm able to work around this bug

SergioRZMasson · 2022-10-06T12:31:10Z

Can you share which version of Android Studio you are using?

kbhokray · 2022-10-06T12:38:13Z

Android Studio Chipmunk | 2021.2.1
Build #AI-212.5712.43.2112.8512546, built on April 28, 2022
Runtime version: 11.0.12+0-b1504.28-7817840 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.4.0-126-generic
GC: G1 Young Generation, G1 Old Generation
Memory: 2048M
Cores: 8
Registry: external.system.auto.import.disabled=true

Current Desktop: ubuntu:GNOME

And here's the NDK version installed, if that is relevant

kbhokray · 2022-10-06T13:43:23Z

I decided to give it one more try with the emulator suggested in the docs (Pixel 2 with API 27, tested with both x86 and x86_64 just to be sure), did cd android && ./gradlew clean then npm start -- --reset-cache. Now I'm back to the original error

2022-10-06 19:08:21.716 5307-5384/com.babylonreactnativesample E/unknown:ReactNative: Exception in native call from JS
    com.facebook.react.devsupport.JSException: Unexpected token '='
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:164)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:764)
     Caused by: com.facebook.jni.CppException: Unexpected token '='
    
    no stack
    	... 7 more
2022-10-06 19:08:21.717 5307-5384/com.babylonreactnativesample E/ReactNativeJNI: Attempting to call JS function on a bad application bundle: HMRClient.setup()
2022-10-06 19:08:21.719 5307-5384/com.babylonreactnativesample E/unknown:ReactNative: Exception in native call
    java.lang.RuntimeException: Attempting to call JS function on a bad application bundle: HMRClient.setup()
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:164)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:764)
2022-10-06 19:08:21.719 5307-5384/com.babylonreactnativesample E/ReactNativeJNI: Attempting to call JS function on a bad application bundle: AppRegistry.runApplication()
2022-10-06 19:08:21.721 5307-5384/com.babylonreactnativesample E/unknown:ReactNative: Exception in native call
    java.lang.RuntimeException: Attempting to call JS function on a bad application bundle: AppRegistry.runApplication()
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:164)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:764)

node: v16.17.0
npm: 8.15.0
Shell: zsh 5.4.2 (x86_64-ubuntu-linux-gnu)
Sample project branch: react-native-0-69

package.json

{
  "name": "BabylonReactNativeSample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@babylonjs/core": "^5.20.0",
    "@babylonjs/loaders": "^5.20.0",
    "@babylonjs/react-native": "^1.3.2",
    "@babylonjs/react-native-iosandroid-0-69": "^1.3.5",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-permissions": "^3.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-config": "^0.70.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

SergioRZMasson · 2022-10-06T13:48:42Z

Yep, I believe this might be a tricker error to solve, and it might not be related to the sample itself but to Babylon React Native. I've opened an issue on BabylonReactNative repo we will need to do some deeper investigation on this.

SergioRZMasson · 2022-10-07T18:02:51Z

@kbhokray , this seems to be an issue with latest versions of babylonjs/core package that might have invalid characters for react native on windows. Can you try changing you dependencies in package.json from:

"@babylonjs/core": "^5.20.0",
"@babylonjs/loaders": "^5.20.0",

to

"@babylonjs/core": "5.17.0",
"@babylonjs/loaders": "5.17.0",

To force them to be at version 5.17, I believe this version does not have the invalid characters. We are working on possibly fixing this on babylonjs as well.

kbhokray · 2022-10-07T19:13:35Z

@SergioRZMasson It works! Thanks a lot for following up. I'm putting my working config below for anyone facing the issue in the future

package.json

{
  "name": "BabylonReactNativeSample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@babylonjs/core": "5.17.0",
    "@babylonjs/loaders": "5.17.0",
    "@babylonjs/react-native": "^1.3.2",
    "@babylonjs/react-native-iosandroid-0-69": "^1.3.5",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-permissions": "^3.6.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.69.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-config": "^0.70.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.4.4"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Emulator: Pixel_2_API_27
node: v16.17.0
npm: 8.15.0

kbhokray mentioned this issue Sep 30, 2022

Error setting up sample project from scratch BabylonJS/BabylonReactNative#456

Closed

SergioRZMasson mentioned this issue Oct 6, 2022

Some users report issue using it with react native 0.69 and 0.65 BabylonJS/BabylonReactNative#469

Closed

kbhokray closed this as completed Oct 7, 2022

krisidmisso mentioned this issue Oct 13, 2022

Unable to load from glb/gltf file from url - Possible Unhandled Promise Rejection BabylonJS/BabylonReactNative#482

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error setting up sample project from scratch #9

Error setting up sample project from scratch #9

kbhokray commented Sep 8, 2022 •

edited

SergioRZMasson commented Sep 19, 2022

kbhokray commented Sep 19, 2022 •

edited

SergioRZMasson commented Sep 19, 2022

thangld322 commented Sep 22, 2022

SergioRZMasson commented Sep 22, 2022

thangld322 commented Sep 29, 2022

thangld322 commented Sep 29, 2022

kbhokray commented Sep 29, 2022

thangld322 commented Sep 30, 2022 •

edited

MykhailoButkevych-MR commented Oct 3, 2022

kbhokray commented Oct 6, 2022

SergioRZMasson commented Oct 6, 2022 •

edited

kbhokray commented Oct 6, 2022

kbhokray commented Oct 6, 2022

SergioRZMasson commented Oct 6, 2022

SergioRZMasson commented Oct 7, 2022

kbhokray commented Oct 7, 2022

Error setting up sample project from scratch #9

Error setting up sample project from scratch #9

Comments

kbhokray commented Sep 8, 2022 • edited

SergioRZMasson commented Sep 19, 2022

kbhokray commented Sep 19, 2022 • edited

SergioRZMasson commented Sep 19, 2022

thangld322 commented Sep 22, 2022

SergioRZMasson commented Sep 22, 2022

thangld322 commented Sep 29, 2022

thangld322 commented Sep 29, 2022

kbhokray commented Sep 29, 2022

thangld322 commented Sep 30, 2022 • edited

MykhailoButkevych-MR commented Oct 3, 2022

kbhokray commented Oct 6, 2022

SergioRZMasson commented Oct 6, 2022 • edited

kbhokray commented Oct 6, 2022

kbhokray commented Oct 6, 2022

SergioRZMasson commented Oct 6, 2022

SergioRZMasson commented Oct 7, 2022

kbhokray commented Oct 7, 2022

kbhokray commented Sep 8, 2022 •

edited

kbhokray commented Sep 19, 2022 •

edited

thangld322 commented Sep 30, 2022 •

edited

SergioRZMasson commented Oct 6, 2022 •

edited