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 <#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 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]

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.