"Error: Magic header not detected" when I'm trying to load a web-assembly

[SciManJD]

Hi! I'm trying to load a web-assembly, compiled with imGUI. I use Vue 3. During the compilation I get the following error

Module parse failed: magic header not detected File was processed with these loaders:

• ./node_modules/wasm-loader/index.js You may need an additional loader to handle the result of these loaders. Error: magic header not detected at new CompileError (C:\AipexOnWeb\frontend\node_modules@webassemblyjs\helper-api-error\lib\index.js:40:109) at parseModuleHeader (C:\AipexOnWeb\frontend\node_modules@webassemblyjs\wasm-parser\lib\decoder.js:287:13) at Object.decode (C:\AipexOnWeb\frontend\node_modules@webassemblyjs\wasm-parser\lib\decoder.js:1681:3) at decode (C:\AipexOnWeb\frontend\node_modules@webassemblyjs\wasm-parser\lib\index.js:248:21) at WebAssemblyParser.parse (C:\AipexOnWeb\frontend\node_modules\webpack\lib\wasm\WebAssemblyParser.js:74:19) at C:\AipexOnWeb\frontend\node_modules\webpack\lib\NormalModule.js:482:32 at C:\AipexOnWeb\frontend\node_modules\webpack\lib\NormalModule.js:358:12 at C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at Object.context.callback (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.module.exports (C:\AipexOnWeb\frontend\node_modules\wasm-loader\index.js:34:8) at LOADER_EXECUTION (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:119:14) at runSyncOrAsync (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:120:4) at iterateNormalLoaders (C:\AipexOnWeb\frontend\node_modules\loader-runner\lib\LoaderRunner.js:232:2)

I suppose that there is a problem with my web-assembly, but I cannot figure it out what could be this problem. I need some help, please...

[BrockReece]

Hi, this was built for Vue 2 a while ago, I'm sure the landscape has shifted a lot since. Let me try converting my example to use Vue 3 so we can eliminate that.

[SciManJD]

OK! Thanks a lot. I'm looking forward for the new version.

[isobolewski]

@BrockReece Will you do an attempt to port this for use with Vue3?

[BrockReece]

Hi guys, sorry for the wait. I have just looked into this and I am noticing a couple of things.

This originally was built for Webpack, but it looks like the more common (sic) Vue 3 build uses Vite. If you are using Vite, you should be able to add this vite-plugin package and add a plugin to your Vite config and this will allow Vite to load your .wasm files.

Once you have solved that, it appears the way this package adds the wasm modules into Vue's $wasm prototype is no longer supported. There are a couple of options here, we fix the current implementation which will populate the $wasm prototype or we use the provide/inject technique which seems to be encouraged.

Which will give us an interface that looks like this.

import { inject } from 'vue'

const wasm = inject('$wasm')
console.log(wasm.arithmetic.add(1, 1)) // 2

I think I prefer this option, so unless anyone feels strongly about using the $wasm prototype, I will go ahead and make these changes.