Блог

Главная - Вопросы по программированию - Как использовать модули Webassembly / wasm с Vite и Vue 3?

Как использовать модули Webassembly / wasm с Vite и Vue 3?

#javascript #webassembly #vuejs3 #vite

#javascript #webassembly #vuejs3 #vite

Вопрос:

Я пытаюсь импортировать модуль wasm в проект vite vue 3. https://github.com/rsms/markdown-wasm

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

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

выдает следующую ошибку:

Неперехваченная ошибка синтаксиса: запрошенный модуль ‘/@modules/markdown-wasm/dist/markdown.es.js ‘ не предоставляет экспорт с именем ‘default’

Я знаю, что wasm необходимо загружать асинхронно.

В документах vite говорится, что его нужно импортировать во что-то вроде этого.

 import init from './example.wasm'

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

импорт с помощью деструктурирования

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

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

выдает следующие ошибки.

 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

Как правильно импортировать модуль wasm?

Комментарии:

1. что-нибудь в документации помогает?

2. обратите внимание, markdown.es.js экспорт {ready, ParseFlags, parse} и отсутствие экспорта по умолчанию

3. Я заметил, что их импорт оставляет еще одну ошибку. Я обновлю свой вопрос.

4. Вы нашли способ решить эту проблему? Я хотел бы импортировать этот же пакет в vite.

5. к сожалению, у меня нет. Я рад, что я не единственный, кто сталкивается с этой проблемой. Это сводило меня с ума в течение нескольких дней, задаваясь вопросом, делаю ли я что-то не так. Что я заметил, так это то, что в отличие от примера, приведенного в документах vite, пакет wasm markdown предоставляет оболочку js для модуля wasm, и кажется, что вы не можете использовать модуль wasm без оболочки, но это ничего не меняет. Я могу импортировать и использовать другие модули wasm просто отлично, только этот не сотрудничает.