Error building project with wasm in web worker

[grahamdaley]

I'm having a problem when building a Vite 3 / Vue.js 3 project that calls a wasm from within a web worker.

Everything seems to work fine when I test the app locally, using "yarn dev". However, when I attempt to build it for production, using "yarn build", I get the following error:

yarn run v1.22.19
$ vue-tsc --noEmit && vite build
vite v3.1.2 building for production...
✓ 3 modules transformed.
✓ 17 modules transformed.
[vite:worker-import-meta-url] Could not load /Users/gdaley/wasm-test/src/hello_wasm/pkg/hello_wasm_bg.wasm (imported by src/hello_wasm/pkg/hello_wasm.js): Cannot read properties of undefined (reading 'load')
file: /Users/gdaley/wasm-test/src/components/HelloWorld.vue?vue&type=script&setup=true&lang.ts
error during build:
TypeError: Could not load /Users/gdaley/wasm-test/src/hello_wasm/pkg/hello_wasm_bg.wasm (imported by src/hello_wasm/pkg/hello_wasm.js): Cannot read properties of undefined (reading 'load')
    at Object.load (/Users/gdaley/wasm-test/node_modules/vite-plugin-wasm/dist/index.js:52:66)
    at async file:///Users/gdaley/wasm-test/node_modules/rollup/dist/es/shared/rollup.js:22113:98
    at async Queue.work (file:///Users/gdaley/wasm-test/node_modules/rollup/dist/es/shared/rollup.js:22820:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have created a simple project, to illustrate this issue.

Could you please let me know if calling wasm functions from web workers is supported currently, and if so, what I'm doing wrong?

[Menci]

Oh, I forgot about web workers. I'll consider how to implement it when I have time.

On Sun, Sep 18, 2022 at 13:32 Graham Daley @.***> wrote:

I'm having a problem when building a Vite 3 / Vue.js 3 project that calls a wasm from within a web worker.

Everything seems to work fine when I test the app locally, using "yarn dev". However, when I attempt to build it for production, using "yarn build", I get the following error:

yarn run v1.22.19

$ vue-tsc --noEmit && vite build

vite v3.1.2 building for production...

✓ 3 modules transformed.

✓ 17 modules transformed.

[vite:worker-import-meta-url] Could not load /Users/gdaley/wasm-test/src/hello_wasm/pkg/hello_wasm_bg.wasm (imported by src/hello_wasm/pkg/hello_wasm.js): Cannot read properties of undefined (reading 'load')

file: /Users/gdaley/wasm-test/src/components/HelloWorld.vue?vue&type=script&setup=true&lang.ts

error during build:

TypeError: Could not load /Users/gdaley/wasm-test/src/hello_wasm/pkg/hello_wasm_bg.wasm (imported by src/hello_wasm/pkg/hello_wasm.js): Cannot read properties of undefined (reading 'load')

at Object.load (/Users/gdaley/wasm-test/node_modules/vite-plugin-wasm/dist/index.js:52:66)

at async file:///Users/gdaley/wasm-test/node_modules/rollup/dist/es/shared/rollup.js:22113:98

at async Queue.work (file:///Users/gdaley/wasm-test/node_modules/rollup/dist/es/shared/rollup.js:22820:32)

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have created a simple project, to illustrate this issue https://github.com/grahamdaley/wasm-test.

Could you please let me know if calling wasm functions from web workers is supported currently, and if so, what I'm doing wrong?

— Reply to this email directly, view it on GitHub https://github.com/Menci/vite-plugin-wasm/issues/13, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWRBAZUXDTV5I7ANZUTWYTV62SOBANCNFSM6AAAAAAQPJJRDI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[grahamdaley]

I'd be really grateful if you could.

[joeally]

@grahamdaley - It took me a while to figure this out but the plugin author doesn't need to change anything you just need to specify the plugin in worker.plugins in your vite config. From the docs:

Note that config.plugins does not apply to workers, it should be configured here instead.

[Menci]

Thanks @joeally! I'll test it and add it to my E2E tests and docs if it works.

[Menci]

I run the sample project and found 2 issues:

1. The way I load the WASM file is not supported in Worker's Vite build context. This has been solved in https://github.com/Menci/vite-plugin-wasm/commit/012e1f59ffea85f68dfdec525f3a77f33e94c9ce (since v3.0.0).
2. Vite's default output format for workers is iife other than es. Set worker.format to "es" to support top-level await, which is required for this plugin.

Seems the worker modules' build process is nothing special than normal scripts. So I think we don't need specfied E2E tests for workers. I'll add the instructions to README.

[Menci]

Now with vite-plugin-top-level-await >= 1.3.0, it's no longer needed to set worker.format to "es". Firefox is supported now.