Menci/vite-plugin-wasm

Error building project with wasm in web worker

grahamdaley opened this issue · 6 comments

grahamdaley commented

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 commented
grahamdaley commented

I'd be really grateful if you could.

joeally commented

@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 commented

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

Menci commented

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 012e1f5 (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 commented

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.