how can I load wasm function in a react app

Question

I have some JS code which I am compiling to a Wasm using Javy. I have this working fine and I can run and test the code from the terminal using wasmtime.

I want to run this code from a react app. I'm able to load the module but I can't call any functions on it.

Here is a simplified version of my JS code, in reality main is importing a whole bunch of classes and doing a load of stuff:

export function main(){
    console.log("HELLO")
}

And I have a wit file:

package local:main;

world index-world {
  export main: func(); 
}

So I export that using javy:

javy compile main.js --wit main.wit -n index-world -o main.wasm

and I can invoke it using wasmtime:

wasmtime run --invoke main main.wasm

That all works.

But when loading in react as described here:

useEffect(() => {

    const loadWasm = async () => {
      const wasmModule = await import('./main.wasm');
      
      console.log(wasmModule.main())
    };

    loadWasm();
  }, [])

I get wasmModule.main is not a function

What is going on here?

How can I load .wasm file into react and use it in my app?

I do also need to be able to pass in arguments and get the returned result to my function. And it seems from reading the Javy repo that might not be possible.