Support Webpack 4.0

[MaxGraey]

Since webpack 4.0 beta released we can implicitly import wasm files.

[alexcrichton]

Oh nice! I've love to land support for this :)

I gave this a spin locally and unfortunately it looks like this won't work out of the box yet as we're getting the error "Sync WebAssembly compilation is not yet implemented". The wasm-bindgen tool generates a JS file that looks like:

// foo.js
import * as wasm from "./foo_wasm";

// ...

and then it also emits a foo_wasm.wasm file next to it. It seems, though, that Webpack hasn't implemented this part of the functionality of importing wasm files yet? It looks like import("./foo_wasm") does indeed work, but I'm unfortunately a bit of a newbie when it comes to asynchronous imports and such.

I'm not sure how to resolve this, but I'd imagine it's for sure fixable! Is there a way to require that the JS shim is itself asynchronously imported as well? We could probably hook in the wasm import promise into that in that case, but otherwise I'm not sure what the best way is to deal with the promise returned from the import of the wasm...

[MaxGraey]

in webpack 4.0 this shipping as experimental feature and turn off by default (or may turn very limit functionality).

Are you try this?

rules: [{
  test: /\.wasm$/,
  type: "webassembly/experimental"
}]

[alexcrichton]

@MaxGraey I think I tried that out yeah (although I'm also a newbie at webpack) but it didn't look to change the error message

[MaxGraey]

This is simple webpack config from this official example. Still not helped?

PS I'm not sure

import * as wasm from "./foo_wasm";

Support in beta. Try to rewrite this to:

import * as wasm from "./foo_wasm.wasm";

And of course we don't need this:

wasm2es6js js_hello_world_wasm.wasm -o js_hello_world_wasm.js --base64

[alexcrichton]

@MaxGraey nah unfortunately the extension doesn't help, the problem here is that webpack I believe does not implement this functionality yet. This library currently assumes that import can be compiled to work synchronously when importing from a wasm module, but this isn't imported in webpack yet.

Switching to using import('./foo_wasm') does indeed work with webpack (yay!) but it unfortunately runs into webpack/webpack#6475 very quickly in Chrome.

I've opened up webpack/webpack#6615 for synchronously importing wasm modules.

[sendilkumarn]

a bit of a newbie when it comes to asynchronous imports and such.

what will be the problem here, It would be great to add in a loader in webpack to do this. taking inspiration from walt-loader

but I'd imagine it's for sure fixable! Is there a way to require that the JS shim is itself asynchronously imported as well?

What do you mean here, import it in the JS file and then use async import that javascript file -> that is doable. IIUC ( the sample test does it)

[alexcrichton]

@sendilkumarn yeah ideally what I'm thinking of is something like:

// at the top level
let wasm = await import('./foo_wasm');

sort of making it an "async module". This doesn't work today, however, and I'm not actually sure how it could work...

[sendilkumarn]

w.r.t wasm-bindgen ?

[alexcrichton]

@sendilkumarn yeah I'm currently wonder what to generate in the wasm-bindgen tool and how it is consumed by other JS files.

[sendilkumarn]

but just an update (based on the discussion we had), you cannot use the sync import in the main chunk. But you can use it in other places. By this, if you have another JS file where you can use it via normal import syntax (sync ones) on the other hand, in the main chunk file you should use async import.

[alexcrichton]

Aha awesome! To confirm @sendilkumarn (sorry I'm very much a JS newb) you mean this, right?

// index.js
let foo = import('./foo.js');

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

export const bar = foo;

Because that does indeed work with webpack today! (yay!)

To confirm though, this is expected to not work, right?

// index.js
import { foo } from './foo.js';

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

export const bar = foo;

[MaxGraey]

I think something like this:

imports-from-wasm.js:

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

// This place possible apply interop wrap/unwrap for foo and boo

export { foo, boo };

index.js:

// async wrapper
void async function () {
   const { foo, boo } = await import('./imports-from-wasm.js');
   ...
} ();

[sendilkumarn]

@alexcrichton

// foo.js
import { foo } from './foo.wasm';
// call foo
foo()

this will work, except that it should not be your chunk's main file. in other words (index.js)

In index.js it should be async.

https://github.com/webpack/webpack/blob/master/test/cases/wasm/simple/module.js

P.S. this is kinda super weird for me but this is how it works.

[alexcrichton]

Ok! Turns out no actual code changes were needed for this issue, but I've rewritten the intro example in the README to use Webpack as a bundler, so I'm going to close this.

[alexcrichton]

Thanks so much for the tip @sendilkumarn!

[benma]

Ok! Turns out no actual code changes were needed for this issue, but I've rewritten the intro example in the README to use Webpack as a bundler, so I'm going to close this.

@alexcrichton could you please share a link to this? We are having trouble getting this to work on webpack4.