search

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

wasm-pack npm module fails with build but not dev #29

Closed hschimke closed 1 year ago

hschimke commented 1 year ago

A sample repository with this error is available at: https://github.com/hschimke/rxing-sveltekit

When testing, everything works correctly and the program works as expected (npm run dev).

When building for production, however, I receive the following output:

> rxing-online@0.0.1 build
> vite build

vite v4.1.4 building SSR bundle for production...
transforming (55) node_modules/esm-env/prod-ssr.js"BarcodeResult" is imported from external module "rxing-wasm" but never used in "src/lib/BarcodeFormatSelect.svelte", "src/routes/encode/+page.svelte", "src/lib/BarcodeResultDisplay.svelte" and "src/routes/decode/+page.svelte".
✓ 60 modules transformed.
5:50:13 PM [vite-plugin-svelte] ssr compile done.
package         files    time      avg
rxing-online        9   0.51s   56.2ms

vite v4.1.4 building for production...
✓ 58 modules transformed.
5:50:20 PM [vite-plugin-svelte] dom compile done.
package         files    time     avg
rxing-online        9   1.11s   0.12s
.svelte-kit/output/client/_app/version.json                                        0.03 kB
.svelte-kit/output/client/vite-manifest.json                                       5.00 kB
.svelte-kit/output/client/_app/immutable/assets/rxing_wasm_bg.5d0754f0.wasm    2,134.16 kB
.svelte-kit/output/client/_app/immutable/assets/_page.5db5c4c8.css                 0.20 kB │ gzip: 0.14 kB
.svelte-kit/output/client/_app/immutable/assets/_layout.17415654.css               0.21 kB │ gzip: 0.14 kB
.svelte-kit/output/client/_app/immutable/assets/_page.9695604d.css                 0.71 kB │ gzip: 0.29 kB
.svelte-kit/output/client/_app/immutable/entry/_layout.ts.984db11e.js              0.07 kB │ gzip: 0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/2.872816d4.js                      0.08 kB │ gzip: 0.10 kB
.svelte-kit/output/client/_app/immutable/chunks/1.4d3c8aca.js                      0.08 kB │ gzip: 0.10 kB
.svelte-kit/output/client/_app/immutable/chunks/_layout.da46b06b.js                0.14 kB │ gzip: 0.14 kB
.svelte-kit/output/client/_app/immutable/chunks/0.f477c1b7.js                      0.14 kB │ gzip: 0.13 kB
.svelte-kit/output/client/_app/immutable/chunks/3.4247acb8.js                      0.18 kB │ gzip: 0.17 kB
.svelte-kit/output/client/_app/immutable/chunks/4.072bf200.js                      0.18 kB │ gzip: 0.17 kB
.svelte-kit/output/client/_app/immutable/entry/error.svelte.b81d9fff.js            0.93 kB │ gzip: 0.55 kB
.svelte-kit/output/client/_app/immutable/entry/_layout.svelte.bb542569.js          1.30 kB │ gzip: 0.71 kB
.svelte-kit/output/client/_app/immutable/entry/_page.svelte.a5469000.js            1.60 kB │ gzip: 0.78 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons.82538ad9.js             2.57 kB │ gzip: 1.35 kB
.svelte-kit/output/client/_app/immutable/entry/encode-page.svelte.c9960a24.js      3.73 kB │ gzip: 1.77 kB
.svelte-kit/output/client/_app/immutable/chunks/rxing_wasm_bg.b7cb131b.js          6.20 kB │ gzip: 2.57 kB
.svelte-kit/output/client/_app/immutable/entry/app.5813da2d.js                     6.22 kB │ gzip: 2.43 kB
.svelte-kit/output/client/_app/immutable/chunks/index.57a8573d.js                  7.62 kB │ gzip: 3.06 kB
.svelte-kit/output/client/_app/immutable/entry/decode-page.svelte.df8ae59f.js      8.70 kB │ gzip: 3.26 kB
.svelte-kit/output/client/_app/immutable/entry/start.fa90f705.js                  22.04 kB │ gzip: 8.91 kB
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/home/henry/sandbox/barcode_web/rxing-online/node_modules/rxing-wasm/' imported from /home/henry/sandbox/barcode_web/rxing-online/.svelte-kit/output/server/entries/pages/decode/_page.svelte.js
    at new NodeError (node:internal/errors:399:5)
    at legacyMainResolve (node:internal/modules/esm/resolve:202:9)
    at packageResolve (node:internal/modules/esm/resolve:781:14)
    at moduleResolve (node:internal/modules/esm/resolve:843:20)
    at defaultResolve (node:internal/modules/esm/resolve:1058:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:416:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)
file:///home/henry/sandbox/barcode_web/rxing-online/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:53
                    throw new Error(format(details));
                          ^

Error: 500 /decode
    at file:///home/henry/sandbox/barcode_web/rxing-online/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:53:12
    at save (file:///home/henry/sandbox/barcode_web/rxing-online/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:355:4)
    at visit (file:///home/henry/sandbox/barcode_web/rxing-online/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:204:3)

Node.js v19.6.1
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
    at ChildProcess.<anonymous> (file:///home/henry/sandbox/barcode_web/rxing-online/node_modules/@sveltejs/kit/src/utils/fork.js:68:13)
    at ChildProcess.emit (node:events:512:28)
    at ChildProcess._handle.onexit (node:internal/child_process:293:12)

linux:

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.2 LTS"

npm:

npm --version
9.4.0

node:

node --version
v19.6.1
Menci commented 1 year ago

It has nothing to do with this plugin. Your code is importing the wasm-pack package from Node.js (not from web, not in Vite's bundle, directly from your Node.js) but the package generated by wasm-pack has no "main" field, which is required by Node.js.

Adding "main" and "type" fields resolves this error:

{
  // ...
  "module": "rxing_wasm.js",
  "main": "rxing_wasm.js",
  "type": "module",
  // ...
}

You also need --experimental-wasm-modules for importing WASM file directly from Node.js: export NODE_OPTIONS=--experimental-wasm-modules.

Menci commented 1 year ago

Since your error is nothing to do with this plugin and even Vite. It's more a Node.js ESM related issue. I'll close it.

Maybe you can open an issue on wasm-pack.

hschimke commented 1 year ago

Thanks for taking a look, much appreciated!

Menci commented 1 year ago

Additionally, this plugin should works with SSR and SvelteKit (the server bundle should work). I don't use SvelteKit but when debugging with others' SvelteKit project I didn't find it's running your code directly in Node.js. Maybe you should check your SvelteKit configuration, which I can't help...

hschimke commented 1 year ago

This is likely because I have mine configured to disable SSR. The intended target of the app is an Azure Static Web Site. The expected behavior is bundling and loading in the browser from the _app/immutable/assets path.

I had hoped that the update to wasm-pack and wasm-bindgen would resolve some of my issues but I'm still blocked on their sideEffects bug (and reading through other bug reports it looks like adding "main" and "type" aren't in the next build either).

hschimke commented 1 year ago

But, thanks to your help, I created a properly configured package.json and posted a new version of the rxing-wasm module. Everything seems to work correctly now, thank you again for your help!