CompileError using webpack: Missing mediainfo.wasm

[nikitatrifan]

Hey there!

It seems like there is a bug. Here is what I'm getting when playing around with the library using create react app template:

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
    at abort (http://localhost:3000/static/js/1.chunk.js:3145:17)
    at http://localhost:3000/static/js/1.chunk.js:3239:15

That's how the lib is being imported:

import MediaInfo from 'mediainfo.js'

Any suggestions? Thanks!

[nikitatrifan]

Just tested the minified version being loaded from unpkg and looks like it works properly. But compiling fails when I import it from node_modules.

[buzz]

The WASM loader tries to load mediainfo.wasm. It determines the URL relative to mediainfo.js.
When using a CDN this just works because mediainfo.wasm is published in the dist folder.

When you're using a custom bundler build flow you need to make sure to copy mediainfo.wasm to your output directory. Check the source code of https://mediainfo.js.org/ on how this is achieved using webpack and copy-webpack-plugin.

Docs on using a JS bundler could be improved, I guess.

[dcfranca]

Is it possible to load the wasm on a create-react-app project without needing to eject it?

[buzz]

Is it possible to load the wasm on a create-react-app project without needing to eject it?

As long as create-react-app is able to serve the WASM file via HTTP you're good to go. Usually it's sufficient to drop the file in a public folder or similar.

[dcfranca]

@buzz thanks for the quick reply

Just to clarify that I'm running on development mode

I've tried a few things:
I do have a public folder, so I copied the MediaInfoModule.wasm there, didn't work

I, then, copied both mediainfo.js and MediaInfoModule.wasm under my src folder, I understood that both need to be on the same folder... and changed the import to:
import MediaInfo from '<my_folder>/mediainfo.js';

Also didn't work

I feel that I'm missing something very silly here

The error message:

Uncaught RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
abort @ <myDir>/src/static/mediainfo.js:42

[dcfranca]

I made it work loading from the CDN! thanks