web: Fallback to instantiate with improper MIME type

[Herschel]

Use --target web in wasm-bindgen and file-loader for WASM files,
allowing wasm-bindgen's built-in fallback from
WebAssembly.instantiateStreaming to instantiate to function.

file-loader spits out the WASM file directly in the output folder,
and imports will resolve to the URL, so that we can load the file
directly, avoiding webpack's built-in wasm loaders.

This allows Ruffle to function on web servers even if they serve
WASM files with the incorrect MIME type, fixing one of our biggest
support problems (#400, #1458). There is some performance impact
on loading with the fallback, but it seems minimal to me and is preferable
to not working at all.

Perhaps someone with more webpack/JS experience can look this over and verify that everything makes sense.

[Toad06]

The selfhosted build works great but the extensions (.xpi and .zip) are broken, at least on my end: it misses the dist/ directory, so actually all major files.

[Herschel]

The selfhosted build works great but the extensions (.xpi and .zip) are broken, at least on my end: it misses the dist/ directory, so actually all major files.

Having trouble reproing here, I get the dist folder--could you try:

npx lerna clean
npm run bootstrap
npm run build

[Herschel]

BTW, I use the npm http-server to test the fallback, as it doesn't serve with the WASM MIME type.

[Toad06]

The directory / files are still missing, unfortunately. Weird. I'll give it another try tomorrow.

[Toad06]

I've tried again and the issue still happened. I've no issue compiling on the current master branch.

FWIW, reverting the changes in load-ruffle.ts creates the dist/ directory with almost all of its files but the .wasm. I still don't understand why this only happens on my end though. :/

[Herschel]

Okay, I was able to repro the issue on my side. Looking into it now.

[Herschel]

Forgot to remove syncWebAssembly setting from extension's webpack config, could you try again now?

[Toad06]

I confirm this is working now. 👍

[Toad06]

There's just a surprising thing, in the JS file there's a path to the folder where Ruffle has been compiled:

async function init(input) {
    if (typeof input === 'undefined') {
        input = "file:///C:/Users/toad/Desktop/Ruffle/ruffle-wasm-instantiate-fallback/web/packages/core/pkg/ruffle_web.js".replace(/\.js$/, '_bg.wasm');
    }

This is not really important though, as input is never undefined.

[Herschel]

That code is from wasm-bindgen, which originally does import.meta.url, but webpack tries to be smart and mangles that into the file URL. Not sure of an easy way to fix it, but seems relatively harmless for now.