How to import wasi_snapshot_preview1 and link with WASI functions

[daksha]

Can any one pls tell me how to use this package in browsers?

I am using webpack for bundling

import { init, WASI } from '@wasmer/wasi';
await init();

let wasi = new WASI({
  env: {
      'ENVVAR1': '1',
      'ENVVAR2': '2'
  },
  args: [
      // 'command', 'arg1', 'arg2'
  ],
});
const importObject = {
  wasi_snapshot_preview1: {
    imported_func(arg) {
      console.log(arg);
    },
  },
};
fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject))
  .then(result => {
    
    wasi.instantiate(result, {})
  });

I am getting following error

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

Help me if I did anything wrong

[Michael Bryan]

Check out the Wasmer JavaScript SDK's Quickstart for how to use the @wasmer/sdk package in the browser.

The Building a Web-Based Markdown Editor with WASIX and WebAssembly tutorial also goes through creating a JavaScript package and a Rust program, and using @wasmer/sdk to run the compiled *.wasm file in the browser.