Synchronously importing wasm modules in the main chunk

[alexcrichton]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Currently when a wasm module is imported like:

import { foo } from './foo.wasm';
// ...

then wepack will report "Sync WebAssembly compilation is not yet implemented"

If the current behavior is a bug, please provide the steps to reproduce.

$ cat foo.wat
(module
  (type (;0;) (func))
  (func (;0;) (type 0)
    nop)
  (memory (;0;) 17)
  (export "memory" (memory 0))
  (export "foo" (func 0)))
$ wat2wasm foo.wat -o foo.wasm
$ cat index.js
import { foo } from './foo.wasm';
$ yarn run webpack index.js
yarn run v1.3.2
warning package.json: No license field
$ /home/alex/code/wasm-bindgen/js-hello-world/node_modules/.bin/webpack index.js
Hash: 64205dfbff78f2176ada
Version: webpack 4.0.1
Time: 64ms
Built at: 2018-2-27 19:15:17
Entrypoint main =
   [0] ./foo.wasm 17.5 KiB {0} [built]
   [1] ./index.js 34 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 

ERROR in chunk main [entry]
[name].js
Sync WebAssembly compilation is not yet implemented
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What is the expected behavior?

Both import('./foo.wasm') and import { foo } from './foo.wasm'; to work. It looks like this is intentionally unimplemented though, so I was wondering if it'd be good to have a tracking issue for this feature? Or maybe such an issue already exists!

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

[sendilkumarn]

Yes, it is not implemented currently. But it is very much in the cards IIUC

[alexcrichton]

I've updated the issue title to specifically refer to the main check as @sendilkumarn points out that synchronous imports are supported in non-main chunks!

[camerondavison]

is this fixed, i was able to build a dist/main.js following these steps.

[jjpe]

I just bumped into this.
It'd be absolutely terrific if this issue was given some consideration and especially some priority, because getting a WASM module to work in a larger system has proven... incredibly frustrating thusfar, and need for async imports bears a significant chunk of the blame for that.

[alexander-akait]

@jjpe A lot of issue and plans, sorry, feel free to send a PR

[xtuc]

The priority should be on the WebAssembly<>JavaScript Module integration specificiation. In the initial chunk, synchronously loading the wasm module is complicated and not considered at the moment.

Note that if you dynamicaly load a chunk, you can then use synchronous imports.

[afrancht]

So has it been fixed? How do we fix it?

[alexander-akait]

/cc @sendilkumarn

[clearloop]

wasm-simple seems solved this problem, but it doesn't work for me even I copied the template code entirely.

Just saw " prefetching doesn't work for WASM yet" in #9802 as a known problem, will webpack-5 solve this problem?

I'm trying to write a wasm based web-framework currently, and expecting this feature deadly 🦀

[sokra]

webpack 5 follows the updated wasm-esm-integration spec (experiments.asyncWebAssembly: true) which allows wasm in entry chunk too. It doesn't put any restriction on wasm location. But wasm modules are async modules which behave similar to modules which use top-level-await (The difference isn't noticeable for most people.)

[alixander]

In case anyone finds this in the future and doesn't want to upgrade to Webpack 5, the solution I used is to just define an entry point that asynchronously loads the actual entry point. This makes the initial chunk ~empty and introduces another roundtrip for the initial page load, but if you're using webassembly in the initial page load anyway, there's no difference between doing this and asynchronously loading the wasm file from a main chunk.

Webpack configuration of entry point: https://github.com/MaxBittker/sandspiel/blob/master/webpack.config.js#L11
Example of entry point: https://github.com/MaxBittker/sandspiel/blob/master/js/bootstrap.js
Which allows synchronous-style wasm importing: https://github.com/MaxBittker/sandspiel/blob/master/js/index.js#L2

[dannywillems]

In case anyone finds this in the future and doesn't want to upgrade to Webpack 5, the solution I used is to just define an entry point that asynchronously loads the actual entry point. This makes the initial chunk ~empty and introduces another roundtrip for the initial page load, but if you're using webassembly in the initial page load anyway, there's no difference between doing this and asynchronously loading the wasm file from a main chunk.

Webpack entry point: https://github.com/MaxBittker/sandspiel/blob/master/webpack.config.js#L11
Example of entry point: https://github.com/MaxBittker/sandspiel/blob/master/js/bootstrap.js
Which allows synchronous-style wasm importing: https://github.com/MaxBittker/sandspiel/blob/master/js/index.js#L2

I do confirm it does the job for me.