Module parse failed: magic header not detected (error loading wasm)

Environment

Node v16.13.0 @callstack/repack 2.5.2 More details in reproducible demo

Description

Error in "./node_modules/bsv-wasm-bundler/bsv_wasm_bg.wasm": Module parse failed: magic header not detected
File was processed with these loaders:
 * ./node_modules/@callstack/repack/assets-loader.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected

Is this expected behaviour? Is the header necessary if this asset (the wasm file) doesn’t need sent over the network since it will be bundled with the app? Any suggestions on how to resolve this?

Reproducible Demo

The result of the following steps can be found here https://github.com/1guzzy/AwesomeProject

• npx react-native init AwesomeProject --version 0.68.3
• setup repack using https://re-pack.netlify.app/docs/getting-started
• https://github.com/callstack/repack/blob/main/templates/webpack.config.js#L184-L186 -> test: ReactNative.getAssetExtensionsRegExp([...ReactNative.ASSET_EXTENSIONS, 'wasm']),
• also add the following to the config

experiments: {
   asyncWebAssembly: true
},

• install wasm library npm install bsv-wasm-bundler --save
• import library import { PrivateKey } from 'bsv-wasm-bundler' & use const random = PrivateKey.fromRandom().toHex()
• Note: if you get this error Error in "./App.js": Module not found: Error: Can't resolve 'bsv-wasm-bundler' you have to add "main": "bsv_wasm", to node_modules/bsv-wasm-bundler/package.json

[ballercat]

Don’t bother with non async Wasm loading. Pretty sure V8 at least has a cap on the size of the binary it’ll load synchronously and it’s small enough to not matter for anything useful since it forces the runtime to freeze the main thread while loading the binary.

[ballercat]

Okay gotcha, I’m out of my depth with ReactNative as I’ve never used it in the past.

Anytime you get a header error it’s a sure sign that the runtime is not getting a correct binary format. So I’d look into why that is. Loaders can be weird and may change the contents of the original file to make it “work” within a webpack app. What you’re looking for is for the raw binary Buffer containing the contents of the original file being passed to the JS runtime.