Menci / vite-plugin-wasm

Add WebAssembly ESM integration (aka. Webpack's `asyncWebAssembly`) to Vite and support `wasm-pack` generated modules.
MIT License
281 stars 16 forks source link

how wait for async load to complete #27

Closed BLaZeKiLL closed 1 year ago

BLaZeKiLL commented 1 year ago

I am not sure if this is the correct place to open this issue but I am trying to load a local wasm node module in my app, It works fine in the dev build but when I do a prod build imports from wasm are undefined. as a workaround I had to add

await import('game-of-life');

before I call any of my wasm functions. I also have a top-level import for the types

import { Universe, Cell } from 'game-of-life';
import { memory } from 'game-of-life/game_of_life_bg.wasm';

I understand async loading of wasm is a bit new, so I am unsure if I am doing this correctly. It just doesn't feel correct 2 have import statements to the same module

complete source code can be found here

Menci commented 1 year ago

Let me check

Menci commented 1 year ago

I found that the direct reason that make it undefined is the assignment to wasm variable is missing in the generated bundle. And it works with Rollup's tree-shaking disabled.

diff --git a/www/apps/app-game-of-life/src/app/app.element.ts b/www/apps/app-game-of-life/src/app/app.element.ts
index 1fa599a..34a8235 100644
--- a/www/apps/app-game-of-life/src/app/app.element.ts
+++ b/www/apps/app-game-of-life/src/app/app.element.ts
@@ -18,7 +18,7 @@ export class AppElement extends HTMLElement {
   private height = 128;

   async connectedCallback() {
-    await import('game-of-life'); // wait for wasm module to load, should be better way
+    // await import('game-of-life'); // wait for wasm module to load, should be better way

     this.innerHTML = `<canvas id="${this.ID}"></canvas>`;

diff --git a/www/apps/app-game-of-life/vite.config.ts b/www/apps/app-game-of-life/vite.config.ts
index 5624b7a..6a5cf10 100644
--- a/www/apps/app-game-of-life/vite.config.ts
+++ b/www/apps/app-game-of-life/vite.config.ts
@@ -7,7 +7,10 @@ export default defineConfig({
   cacheDir: '../../node_modules/.vite/app-game-of-life',

   build: {
-    target: 'esnext'
+    target: 'esnext',
+    rollupOptions: {
+      treeshake: false
+    }
   },

   optimizeDeps: {

It doesn't seem to be an issue with this plugin but seems to be Vite/Rollup's. I'll try to produce it and submit an issue to Vite or Rollup. If so, let's keep this issue open for reference before it's fixed.

Menci commented 1 year ago

No, I think it's an issue with wasm-pack. It generates the pacakge.json with sideEffects: false and use a __wbg_set_wasm statement to set the wasm module object. I think it's the exptected behavior for it to be tree-shaked...

Menci commented 1 year ago

I think the bug is introduced in https://github.com/rustwasm/wasm-bindgen/commit/721c86c3467750bf2a46bf85941e6c211ae9e87a. Let me submit a bug to rustwasm.

Menci commented 1 year ago

https://github.com/rustwasm/wasm-pack/issues/1235

BLaZeKiLL commented 1 year ago

Thanks for looking into it and providing the explanation, it makes sense I'll track the issue on waan-pack maybe try a fix

BLaZeKiLL commented 1 year ago

yeah adding to side-effects fixes it