Unable to bind Webassembly to React Native JSI

[anudit]

Hey, I'm trying to get Semaphore to work with react-native.

• The project already has some shims to get libs like Wagmi & viem to work (pollyfills needs for crypto etc to work).
• I also have patched versions of iden3 libraries that use updated version of snarkjs. The patched versions also includes a fix that removes web_workers from ffjavascript to make it work with react-native, though that removes support for multi-threading.
• I think I just need to get Wasm to work with react-native but running into Unable to bind Webassembly to React Native JSI.

Minimal Demo: https://github.com/anudit/semaphore-minimal

PS: Would love to help figure this out too, https://twitter.com/cawfree/status/1640335508143321090?s=20

[Almaju]

In my case it was because I didn't have New Architecture enabled. I couldn't make it work with Expo so I went with React Native CLI and then https://reactnative.dev/docs/0.71/the-new-architecture/use-app-template?platform=ios#enable-the-new-architecture

[anudit]

@Almaju Switched newArchEnabled to true on expo, still no luck.

[grmkris]

so having same issue myself.. added this to metro.config

assetExts: metroDefault.assetExts.concat(['wasm']),

then created a shim file like this:

import { Worker } from 'react-native-workers'
import * as WebAssembly from 'react-native-webassembly'

// This is a basic shim. Depending on the feature parity between
// web-workers and react-native-workers, you might need to expand this.
global.Worker = Worker

global.WebAssembly = WebAssembly

when trying to run web-assembly code, I am getting this:

 WARN  Possible Unhandled Promise Rejection (id: 1):
Error: TypeError: WebAssembly.compile is not a function (it is undefined)
Error: TypeError: WebAssembly.compile is not a function (it is undefined)

[avivash]

@Almaju Switched newArchEnabled to true on expo, still no luck.

bumping, i'm seeing the same thing too 👍🏼

[avivash]

After looking through the source code, it looks like it's using NativeModules, whereas maybe it should instead use TurboModules? I'm fairly new to react native, but it sounds like this is what we want and it was what @cawfree originally mentioned in their post

const {
  NativeModules
} = require('react-native');

[currenthandle]

I'm running into the same issue described: my full implementation

Has anyone found a solution?

[0xdavid7]

I set the flag newArchEnabled=true in android/gradle.properties and it works on my machine

[currenthandle]

@tranhuyducseven what version of Expo are you using?

I already have this newArchEnabled=true set in android/gradle.properties. And I still seeing the Unable to bind Webassembly to React Native JSI issue:

 ERROR  Error: Unable to bind Webassembly to React Native JSI., js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

I tried disabling hermes by adding "jsEngine": "jsc", to app.json then running expo prebuild. I get essentially the same error, except it doesn't mention hermes anymore:

 ERROR  Error: Unable to bind Webassembly to React Native JSI.
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

The error occurs as a result of this line:

const module = await WebAssembly.instantiate<{
        add: (a: number, b: number) => number
      }>(bufferSource)

I am seeing the same in iOS testing.

[currenthandle]

It seems that calling WebAssembly is causing the app to throw an exception with then inhibits the app from registering it's self: Expo docs: "Application has not been registered" error

[0xdavid7]

@currenthandle I follow the react-native document then map into expo, these steps:

1. npx expo prebuild
2. set newArchEnabled=true
3. yarn run:android

Note: You have to run native device or virtual simulator (android studio for android), you can not run with Expo Go!

This is the result:

React Native:

Expo:

I am not sure about the following config in app.config.ts, you can try it

{ 
     ....
     plugins: ["react-native-webassembly"],
}

Hope it works for you.

[cawfree]

Hey y'all, sorry for missing the discussion.

I recently had a kid and they are just as a big of a distraction as you'd think they'd be. But I'm back now.

This is sounding resolved, thanks to everyone who participated. Please feel free to say if you want this reopened.