Can't resolve 'wasmer_wasi_js_bg.wasm'

[MihaelIsaev]

Trying to compile my files using webpack and getting weird error Can't resolve 'wasmer_wasi_js_bg.wasm'

Seems it is related to @wasmer/wasi, please help

[corwin-of-amber]

Is this Webpack 5? I would recommend declaring .wasm files as resource assets in your webpack.config.js, like this:
https://webpack.js.org/guides/asset-modules/#resource-assets

[corwin-of-amber]

Actually, looking at my own node_modules/@wasmer, it looks like wasmer_wasi_js_bg.wasm is not there at all. It sill manages to load WASM binaries though... (disclaimer: I have not tried it with Webpack.)

[MihaelIsaev]

Is this Webpack 5?

webpack: 5.67.0
webpack-cli: 4.9.2

I rolled back to @wasmer/wasi@0.12.0 for now where everything just worked

[corwin-of-amber]

well ofc 0.12.0 did not have any wasm component. I looked at the code a little bit, the wasm should be dataurl-packed into the JS, but for some reason there is still a URL pointing at the code. I believe this can be worked around using externals (https://webpack.js.org/configuration/externals/) to make webpack ignore the missing file, since it will not actually be required at runtime. Have to try myself with Webpack later.

[corwin-of-amber]

I managed to convince Webpack with the following externals config:

    externals: {
        'wasmer_wasi_js_bg.wasm': true
    }

Clearly a bit weird... @syrusakbary any idea why the line:

wasmer-js/lib.ts

Line 78 in 1184d7a

input = await WebAssembly.compile(dataUriToBuffer(wasm_bytes as any as string));

generates a fetch in Library.esm.js?

    if (typeof input === 'undefined') {
        input = new URL('wasmer_wasi_js_bg.wasm', import.meta.url);
    }
    ...
    input = fetch(input);

[amesgen]

For anyone looking how to resolve this when using Parcel: An approach that worked for me is to use the parcel-resolver-ignore plugin (see setup docs there), and then to add

  "parcelIgnore": [
    "wasmer_wasi_js_bg.wasm"
  ]

to package.json.

[enriquebarco]

I managed to convince Webpack with the following externals config:

    externals: {
        'wasmer_wasi_js_bg.wasm': true
    }

Clearly a bit weird... @syrusakbary any idea why the line:

wasmer-js/lib.ts

Line 78 in 1184d7a

input = await WebAssembly.compile(dataUriToBuffer(wasm_bytes as any as string));

generates a fetch in Library.esm.js?

    if (typeof input === 'undefined') {
        input = new URL('wasmer_wasi_js_bg.wasm', import.meta.url);
    }
    ...
    input = fetch(input);

This helped me resolve the issue. Thanks @corwin-of-amber for the tip.