使用 go 和 Vue + Vite 编写的 wasm 函数的设置

Question

The Goal

How to use wasm functions written in Go with Vue + Vite? ( ideally in a pinia's actions store )

How not to succeed

On the Go side following the wiki with vanilla js it works perfectly and I'm able to play with the syscall/js package ( so I guess my.wasm is not completely crap )

On the Vitesse(Vue + Vite) side following the Vite doc I'm able to run a wasm function add.wasm ( taken from here )

But unfortunately with the.wasm I wrote and compiled myself with go v1.19 I get the following error:

Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="go" error: module is not an object or function

If I try to import the wasm_exec.js directly in the store and also get:

Failed to resolve import "go" from wasm_exec.js or The requested module '/src/store/wasm_exec.js' does not provide an export named 'Go'

I tried to use the vite-plugin-wasm without success.

The issue might be related to the fact that wasm written in go needs to use a wasm_exec.js then a Go() instance in order to make the WebAssembly.instantiateStreaming() work..

Or it's completely something else that I don't get.

It'll be more understandable with my demo

I'm out of ideas on how to make it work.. Is the issue in go? vite? Wasm? Can it be realated to this issue or this one ? If anybody has experience using is combinaison ( go wasm vue vite ) can you share your experience/code/docs?

Answer 1

Solved

After further research I found my error...

As the error messages suggested, the problem was due to the integration of wasm_exec.js.

I had ended up using tinygo in order to reduce the size of the.wasm generated: For a simple hello world ~1MB with standard go1.19 vs ~10KB with tinygo… ( btw I will be curious to know the reason behind this massive difference.. because of the garbage collector??? )

But as they mention in the doc the tinyo wasm_exec.js is different from the standard go one:

Execution of the contents require a few JS helper functions which are called from WebAssembly. We have defined these in tinygo/targets/wasm_exec.js . It is based on $GOROOT/misc/wasm/wasm_exec.js from the standard library, but is slightly different. Ensure you are using the same version of wasm_exec.js as the version of tinygo you are using to compile.

By mistake I mixed the wasm_exec.js from go with a.wasm form tinygo… or vice versa idk… and it didn't worked..

To patch it I use the 2 files from tinygo ( didn't try only with go1.19 ) and I import them into the header of the index.html

Vite handle rest and I'm able to call the wasm functions from everywhere, including from the pinia stores.