How to show a WASM GUI in tauri (with Next.js)

[wangxiaochuTHU]

Hello, I am trying to show a wasm gui object in tauri. I've no idea how to make this embedding.

I have already complied the gui part targeting at wasm32-unknown-unknown to 4 output files a.wasm, a.wasm.d.ts, a.js, a.ts (These 4 files are put in a public folder).

Recently, I failed to use the wasm in tauri. I know it is not the problem with tauri, but next.js or typescrite. However, I don't understant next.js well and don't plan to learn it deeply, since I think Rust can solve most cases. Would someone give an short example of combining wasm and tauri? Thanks.

// this approach fails to work, Module not found: Can't resolve 'wbg' in *pkg*
const WasmComponent = dynamic({
    loader: async () => {
        const wasmModule = await import('../public/a.wasm')
        wasmModule .start();
        return () => <div></div>
    },
})

// this approach fails to work, too. TypeError: Cannot read properties of undefined (reading 'instantiate')
import { useEffect, useState } from 'react';
import { AsBind } from 'as-bind';

export const useWasm = () => {
    const [state, setState] = useState(null);
    useEffect(() => {
        const fetchWasm = async () => {
            const wasm = await fetch('a.wasm');
            const instance = await AsBind.instantiate(wasm, {});
            setState(instance);
        };
        fetchWasm();
    }, []);
    return state;
}

[FabianLars]

The second example looks almost correct i think. I did basically the same but without as-bind (which is for assemblyscript?).
iirc it was something like this

// The file's location is `/public/whatever.wasm`. The public folder mechanism may differ depending on the frontend stack.
const response = await fetch('/whatever.wasm');
const bytes = await response.arrayBuffer();
const { module, instance } = await WebAssembly.instantiate(bytes);

const add = instance.exports.add as CallableFunction;
console.log(add(12, 34));

[wangxiaochuTHU]

thanks anyway, but it won't work. I also tried the keywords you provided and obtained a yet-wrong-but-closer solution

// TypeError: WebAssembly Instantiation: Imports argument must be present and must be an object
const response = await fetch("whatever.wasm");
const buffer = await response.arrayBuffer();
const module = await WebAssembly.compile(buffer);
const instance = await WebAssembly.instantiate(module);

It seems that WebAssembly.instantiate should take another argument Imports, but I can't figure out what is it and where does it come from.

[FabianLars]

Apologies, i missed an await. The second module input for instantiate is optional if you give it an arraybuffer.
I updated my code above to include the await and added 2 lines i used to test it just now.

[wangxiaochuTHU]

Apologies, i missed an await. The second module input for instantiate is optional if you give it an arraybuffer. I updated my code above to include the await and added 2 lines i used to test it just now.

Thanks, you are right. I apologies, I just find it to work fine for my custom wasm. It might just won't work for wasm built on some third-party crates, in which case, Imports argument is required in force. Thanks very much, I will try searching from that particular crate.

In case this attempt fails, I feel I would have to run tauri and bevy (that app) seperately with protocol used for communication.

[wangxiaochuTHU]

I'd like to share the follow-up investigation on this problem. Since I don't know much on rendering or frontend, I'm only 80% sure.

Loading wasm

FabianLars has provided the correct way, as the Answer shown above.

Another way is using the JS file, that is generated together with the .wasm file. Suppose you have already put the JS file ( whatever.js) and wasm file (whatever.wasm) to a folder, e.g. public, then

1. import init from '../../public/whatever';
2. var wasm = await init('whatever.wasm') as WebAssembly.Exports
3. const add = wasm.rust_add as CallableFunction
   then you are able to use the add function, e.g. console.log(add(3, 4))

Version of wasm-bindgen

Older version of wasm-bindgen has bugs in generating JS files, so remember to use bug-free versions.