How to use Webassembly/wasm modules with Vite and Vue 3?

Viewed 1687

I am trying to import a wasm module into a vite vue 3 project. https://github.com/rsms/markdown-wasm


<script>
import init, { parse } from "markdown-wasm";

export default {
  async setup() {
    console.log(parse("# hello\n*world*"));
  },
};
</script>


it Throws the following error:

Uncaught SyntaxError: The requested module '/@modules/markdown-wasm/dist/markdown.es.js' does not provide an export named 'default'

I am aware that wasm needs to load asynchronously.

On the vite docs it says it needs to be imported in something along the lines of this.

import init from './example.wasm'

init().then(exports => {
  exports.test()
})

importing via destructuring


import { parse, ready } from "markdown-wasm";

export default {
  async setup() {
    await ready;
  },
};

gives the following errors.

md.js:85 GET http://localhost:3000/markdown.wasm 404 (Not Found)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 falling back to ArrayBuffer instantiation
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 GET http://localhost:3000/markdown.wasm 404 (Not Found)
r @ md.js:85
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 failed to asynchronously prepare wasm: Error: wasm abort: both async and sync fetching of the wasm failed
(anonymous) @ md.js:85
Promise.then (async)
r @ md.js:85
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
wlib.js:21 Uncaught (in promise) Error: wasm abort: Error: wasm abort: both async and sync fetching of the wasm failed
    at X (wlib.js:21)
    at Q (md.js:85)
    at md.js:85
    at X (wlib.js:21)
    at md.js:85

What would be the correct way to import a wasm module?

0 Answers
Related