WASM 反应模块解析失败：未检测到魔法 header

Question

我正在尝试在 React 项目中加载一个简单的 Web 程序集模块。 wasm 模块是使用 MODULARIZE 选项编译的。

从 documentation 我尝试将其合并到我的代码中，如下所示：

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 的情况下编译也会出现此错误。

Answer 1

我试过了this and this with my module but they didn't work so tried putting the wasm file directly in the public folder and fetching it from there (see also: this）。它需要针对 wasm 模块的用例（内存设置等）进行一些特定的调整。我的具体案例现在看起来像这样

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
  });
}

编辑

我在从其 javascript 包装器（例如 a.out.js）中获取 wasm 时遇到了幻数错误，因为 react 存在路由问题。最后，我决定将 javascript 作为依赖项包含在 index.html 文件中并不那么麻烦。这样做的好处是不必弄乱 webpack 并且 webpack 不会弄乱 emcc 生成的 js。此外，不直接加载 wasm 模块，emcc 生成的 js 负责设置 importObject.

Answer 2

现在要在任何浏览器中使用 .wasm，您必须将其托管在具有适当 MIME 内容类型的任何简单服务器中，例如在 chrome 网络选项卡中，您必须看到这种回应

然后只有 WASM 在您的 fetch('./my-library.wasm') 代码中被视为正确的响应

可以参考官方文档Emscripten

上面写的很清楚

Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// XHR requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a webserver. The easiest way to do this is to use the python SimpleHTTPServer (in the current directory do python -m SimpleHTTPServer 8080 and then open http://localhost:8080/hello.html).

我可以看到你正在使用 React，所以很明显你确实使用了本地 Node.JS 服务器，你需要将二进制文件与不应该 ./ 的非动态内容一起放置。它应该是 .css 和 images 所在的其他文件夹

重要提示： 回复必须有application/wasm

WASM 反应模块解析失败：未检测到魔法 header

WASM react module parse failed: magic header not detected

reactjs

webassembly