Typescript and Webpack 5 issues.

[CarterFendley]

In a normal javascript project, I am able to use Webpack 5 and the wasm-pack-plugin just fine. You can see this working in this Rust Webpack sandbox, just open a new terminal and type yarn up.

However in this Rust Webpack + Typescript sandbox (again use a new terminal to run yarn up as described in the README), I immediately get the following error with syncWebAssembly: true.

ERROR in ./pkg/index_bg.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async split point (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./src/index.ts --> ./pkg/index.js --> ./pkg/index_bg.wasm
* ... --> ./pkg/index.js --> ./pkg/index_bg.js --> ./pkg/index_bg.wasm
* ... --> ./pkg/index_bg.js --> ./pkg/index_bg.js --> ./pkg/index_bg.wasm
* ... --> ./src/index.ts --> ./src/index.ts --> ./pkg/index.js --> ./pkg/index_bg.wasm
* ... --> ./pkg/index.js --> ./pkg/index_bg.wasm --> ./pkg/index_bg.js --> ./pkg/index_bg.wasm
* ... --> ./pkg/index_bg.js --> ./pkg/index_bg.wasm --> ./pkg/index_bg.js --> ./pkg/index_bg.wasm
 @ ./pkg/index.js 1:0-40
 @ ./src/index.ts 25:55-78

This is odd to me because I use import("../pkg/index") so not sure why this error would be thrown.

When I update to use asyncWebAssembly: true instead, it compiles however the following does not display anything to the screen. Locally, there are a bunch of errors in the console about hello() being undefined.

const rust = import("../pkg/index");

rust.then((m) => {
  console.log(m);
  document.body.innerHTML = `
  <h1>Message from Rust:</h1>
    <h2>${m.hello()}</h2>
  `;
});

When checking the console, we can see that m is a promise not the rust module. (Apologies for the webpack errors I could not clear)

Taking this into account I can get this working by using the normal ES6 import and just assuming it is a promise. However as you can shown VSCode sees this as an error.

Property 'then' does not exist on type 'typeof import("blah/blah/blah")' .ts(2339)

This looks different than the esm-integration proposal which I gather is what asyncWebAssembly is based on. To the best of my googling ability, I have not been able to find anything that looks similar.

Questions

• Why does this only happen with typescript?
• Does wasm-pack-plugin need to be updated for asyncWebAssembly?
• Should I take this up with webpack?