Сбой анализа модуля реакции WASM: заголовок magi c не обнаружен - PullRequest
Новая
       36

Сбой анализа модуля реакции WASM: заголовок magi c не обнаружен

0 голосов
/ 28 апреля 2020

Я пытаюсь загрузить простой модуль веб-сборки в реактивном проекте. Модуль wasm был скомпилирован с опцией MODULARIZE.

Из документации Я попытался включить это в свой код следующим образом: 

fetch('./my-library.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    console.log("do something");
  });

Где в идеале Я хотел бы сохранить результаты в state, чтобы я мог получить доступ к модулю по всему коду (заменяя журнал консоли).

К сожалению, это дает мне ошибку 

Unhandled Rejection (CompileError): wasm validation error: at offset 4: failed to match magic number

Что я скучаю? Компиляция без MODULARIZE также выдает эту ошибку.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Чтобы использовать .wasm в любом браузере на данный момент, вы должны разместить его на любом простом сервере с правильным MIME Content-Type. Например, во вкладке сети chrome вы должны увидеть ответ такого типа

enter image description here

Тогда только WASM считается правильным ответом в вашем fetch('./my-library.wasm') коде

Вы можете обратиться к официальной документации Emscripten

ясно сказано

К сожалению, некоторые браузеры (включая Chrome, Safari и Inte rnet Explorer) не поддерживают файл: // XHR-запросы и не могут загрузить дополнительные файлы, необходимые для HTML (например, файл .wasm или данные упакованного файла, как указано ниже). Для этих браузеров вам необходимо обслуживать файлы с помощью веб-сервера. Самый простой способ сделать это - использовать python SimpleHTTPServer (в текущем каталоге выполните python -m SimpleHTTPServer 8080, а затем откройте http://localhost: 8080 / hello. html).

Я вижу, что вы используете реагировать, поэтому очевидно, что вы используете локальный Node.JS сервер, вам нужно поместить двоичный файл вместе с не динамическим c контентом, который не должен быть ./ , это должна быть какая-то другая папка, в которой есть .css и images

Важное примечание: обязательно, чтобы в ответе было application/wasm

0 голосов
/ 28 апреля 2020

Я пытался это и это с моим модулем, но они не работали, поэтому попытался поместить файл wasm непосредственно в папку publi c и извлечь его оттуда (см. также: это ). Требовалась некоторая настройка c для варианта использования модуля wasm (настройки памяти и т. Д. c). Мой конкретный c случай теперь выглядит следующим образом 

componentDidMount() {
  this.loadWasm();
}

loadWasm() {
  const path = process.env.PUBLIC_URL + '/my-library.wasm';
  const importObject = {
    env: {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({initial: 256, maximum: 1024}),
      table: new WebAssembly.Table({initial: 256, element: 'anyfunc'}),
      __assert_fail: function() {
        // todo
      },
      emscripten_resize_heap: function() {
        // todo
      },
      emscripten_memcpy_big: function() {
        // todo
      },
      setTempRet0: function() {
        // todo
      }
    }
  };
  WebAssembly.instantiateStreaming(fetch(path), importObject).then(obj => {
    // do stuff
  });
}

РЕДАКТИРОВАТЬ

При получении wasm из * 1021 я получил ошибку числа magi c * Обертка (egaout. js) из-за проблемы маршрутизации с реакцией. В конце концов, я решил, что было бы проще включить javascript в качестве зависимости в файле индекса. html. Преимущество этого заключается в том, что вам не нужно связываться с webpack и webpack, а не связываться с em cc-Generated js. Кроме того, не загружая модуль wasm напрямую, em cc -генерированный js позаботится о настройке importObject.

...