Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error calling wasm function with complex object as argument

See original GitHub issue

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.

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

grahamdaleycommented, Sep 21, 2022

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

0reactions

sapphi-redcommented, Sep 21, 2022

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

Top Results From Across the Web

Make WebAssembly bundling work with wasm-bindgen #4551

This is a feature request to add support for wasm-bindgen, ... Error calling wasm function with complex object as argument #10182.

Call webassembly from embedded v8 with imported function

When trying to run this code I get a v8 error WebAssembly.Instance(): Imports argument must be present and must be an object. I...

Learning Golang through WebAssembly - Part 3, Interacting ...

Call to invoke a function of the object, createElement , passing in any arguments, "p" which returns the result as a js.

WASM Tutorial - Marco Selvatici

Introduction. Webassembly (WASM) is an innovative low-level language that can run on all modern browsers. As the name suggests, this is an assembly-like ......

Understanding WebAssembly text format - MDN Web Docs

To enable WebAssembly to be read and edited by humans, there is a textual representation of the wasm binary format. This is an...