Error calling wasm function with complex object as argument

[grahamdaley]

Describe the bug

I came up against an issue when developing a Vite 3 based project that calls a wasm function that passes a complex object (an array of arrays of numeric values) from the JS world into the wasm.

Vite seems to have a problem binding to the JS code generated by wasm-build, which results in the following error message being shown in the browser console:

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

I have created an example project to illustrate this.

Please let me know if this is a bug, or if the error is my own.

Many thanks!

Reproduction

https://github.com/grahamdaley/vite-wasm-test

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 175.95 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    @vitejs/plugin-vue: ^3.1.0 => 3.1.0 
    vite: ^3.1.0 => 3.1.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

wasm-pack build ./src/hello_wasm --target bundler generates a code that uses ESM Integration Proposal for Wasm. Because this proposal is not yet stable, it's not supported by Vite. (This feature request is tracked at #4551.)

Using vite-plugin-wasm or using --target web will work.

[grahamdaley]

I tried using --target web but it resulted in a slightly different error message:

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

[grahamdaley]

I would have used vite-plugin-wasm, but it seems it's not suitable for my particular use case, which needs the wasm calls to be made from within a web worker.

[sapphi-red]

For both --target bundler and --target web, you'll need to import the generated JS file instead of wasm file.
This is because wasm-pack generates a glue code and the generated wasm file requires that.
https://github.com/grahamdaley/vite-wasm-test/blob/aab063da86737bf8a4db85cf39002a3ac25e255b/src/components/HelloWorld.vue#L3

[grahamdaley]

That works perfectly! Thank you so much for your help, @sapphi-red!