Synchronously importing wasm modules in the main chunk

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.

Author: Fantashit

3 thoughts on “Synchronously importing wasm modules in the main chunk

  1. 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.

  2. 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.)

  3. 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

Comments are closed.