"React Native remote debugging does not work with Babylon Native"

Questions
1

I’ve been trying to get a react native minimal example going on Windows, but I’m stuck with this message in the UI:

Could not initialize Babylon Native
React Native remote debugging does not work with Babylon Native

I switched to Hermes, cleared the cache, cleaned and ran again, but that still didn’t work.
The release version shows a white page, not the scene.
Any ideas?

2

cc @Cedric who might be able to help on this one :slight_smile:

3

Have you disabled debugger support in your app.cpp like this ?

4

Thanks Cedric, I turned off the web debugger and the debug error disappeared.

The engine was still not loaded; NativeModules turned out to be empty, no BabylonNative.
I turned off hermes, cleaned, deleted node_modules, upgraded all node modules, retargeted the solution to avoid Windows SDK errors, recompiled a few times, reset the metro cache,

but now I’m stuck with the following repeating error.
Might have something to do with Metro bundling; I’ll try again tomorrow.

Error: ENOENT: no such file or directory, open ‘C:\Users\frank\repos\babylonwin\code’
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at getCodeFrame (C:\Users\frank\repos\babylonwin\node_modules@react-native-community\cli-plugin-metro\node_modules\metro\src\Server.js:1028:18)
at Server._symbolicate (C:\Users\frank\repos\babylonwin\node_modules@react-native-community\cli-plugin-metro\node_modules\metro\src\Server.js:1101:22)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Server._processRequest (C:\Users\frank\repos\babylonwin\node_modules@react-native-community\cli-plugin-metro\node_modules\metro\src\Server.js:458:7) {
errno: -4058,
syscall: ‘open’,
code: ‘ENOENT’,
path: ‘C:\Users\frank\repos\babylonwin\code’
}

FYI:
“dependencies”: {
“@babylonjs/core”: “^5.34.0”,
“@babylonjs/loaders”: “^5.34.0”,
“@babylonjs/react-native”: “^1.4.1”,
“react”: “^18.2.0”,
“react-native”: “^0.70.6”,
“react-native-permissions”: “^3.6.1”,
“react-native-windows”: “^0.70.7”
},
“devDependencies”: {
“@babel/core”: “^7.20.5”,
“@babel/runtime”: “^7.20.6”,
“@react-native-community/eslint-config”: “^3.2.0”,
“babel-jest”: “^29.3.1”,
“eslint”: “^8.28.0”,
“jest”: “^29.3.1”,
“metro-config”: “^0.73.3”,
“metro-react-native-babel-preset”: “^0.73.3”,
“react-test-renderer”: “^18.2.0”,
“yarn-upgrade-all”: “^0.7.1”
}

5

Now I get:
Error: Exception in HostObject::get: It is illegal to retrieve the name associated with a property symbol.

and

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

I’ve been trying for years to get a babylonjs example to work but it seems impossible…

6

I think I see a part of the problem.
You will need to add a new package for ios-android and another one for Windows.

"@babylonjs/react-native-iosandroid-0-65"

and

"@babylonjs/react-native-windows-0-65"

Also note, that 0-65 is the reactnative version for intended use. Current supported versions are 0.64, 0.65 and 0.69
For 0.70, which looks like it’s your case, I don’t know if 0.69 is binary compatible with it.

I suggest to try react-native 0.69 and when it works, try to switch to 0.70

7

Thanks, I added 0-65 and tried the various versions but nothing works - they give all kinds of random errors.

For instance:
|Error|C2338|static_assert failed: ‘Mso::MustBeNoExceptVoidFunctor: not a noexcept callable functor returning void’|Microsoft.ReactNative|C:\Users\frank\repos\babylonwin\node_modules\react-native-windows\Mso\dispatchQueue\dispatchQueue.h|728||

|Error|MSB4019|The imported project C:\Users\frank\repos\babylonwin\node_modules\react-native-windows\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props was not found. Confirm that the expression in the Import declaration C:\Users\frank\repos\babylonwin\node_modules\react-native-windows\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props is correct, and that the file exists on disk.|babylonwin|C:\Users\frank\repos\babylonwin\windows\babylonwin\babylonwin.vcxproj|23||

8

Is your project available somewhere so we can take a look?

9

I made it again from scratch; the react-native-windows example was working, but with Babylon added I get the same errors again; they vary with each react-native-windows version.

10

In Package.json, can you please use "@babylonjs/react-native-windows-0-69" because it’s using rect-native 0.69 "react-native": "0.69.7"

Also, you may have to fix solution with autolink.
npx react-native autolink-windows

11

Thanks, no error but still a white window, presumably the native module doesn’t load. I did test with 0.65 versions matched, but that didn’t compile or was also white. I don’t have console output since the debug version doesn’t work, so I’ll have to add a logger tomorrow.

12

I give up, it’s impossible to work with

13

I’ve recently gotten it to work with the new @babylonjs/react-native-window-70 version 1.5.0. Feel free to take a look at my test project. GitHub - nerocui/babylon_native_test

2 Likes