Got URL TypeError while using Vite2 to start dev server

[Bisstocuz]

I'm using latest Vue3+Vite2, this package is pretty good (I successfully tested it on production build).

Description

My codes:

import { encode as EncodePNG, decode as DecodePNG } from "@jsquash/png";
import { encode as EncodeJPG, decode as DecodeJPG } from "@jsquash/jpeg";
import { encode as EncodeWebP, decode as DecodeWebP } from "@jsquash/webp";
import { encode as EncodeAVIF, decode as DecodeAVIF } from "@jsquash/avif";

let data = await DecodeJPG(await file.arrayBuffer());

When I test it on Dev server, I got a TypeError for URL:

mozjpeg_dec.js:9 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at mozjpeg_dec.js:9
    at initEmscriptenModule (utils.js:25)
    at init2 (decode.js:17)
    at decode (decode.js:21)
    at HTMLInputElement.handleFile (Test.vue:22)

located at:

var wasmBinaryFile = new URL("mozjpeg_dec.wasm",import.meta.url).toString()

After I build it by npm run build and test this on production build, everything works as normal. I believe this issue is related to Vite's esbuild module or another, but I can make sure what caused this.

How to produce

1. create a new Vite project by npm init vite@latest
2. import this package and call its function
3. run dev server by npm run dev
4. test it

Thanks!

[Bisstocuz]

I use console.log to print import.meta.url, it got http://localhost/src/views/Test.vue?t=1640423767507

[jamsinclair]

Interesting! Do you have an example git repository where I could debug this? That would be super convenient.

[Bisstocuz]

Interesting! Do you have an example git repository where I could debug this? That would be super convenient.

https://github.com/Bisstocuz/jSquash-Issue-8 Hi, this is reproduction above.

Use npm run dev to start Dev server, and use npm run build then npm run preview to run Production server.

[jamsinclair]

@Bisstocuz This is a big help, thank you. Will take a look later 🤓

[jamsinclair]

Hmm, looks like this is an issue with Vite itself:

• https://github.com/vitejs/vite/issues/5169
• https://github.com/vitejs/vite/issues/5075

A possible workaround looks likely to be updating your Vite config with:

optimizeDeps: {
  exclude: ["@jsquash/png"],
},

See: https://github.com/nshen/test-npm-crate/issues/1

We could compile the Rust/Wasm JS glue code specially for Vite, but I'll leave that as a last resort. Would prefer there to be a more complete solution from the Vite side.

Would this resolve your issue for the time being?

[Bisstocuz]

optimizeDeps: {
  exclude: ["@jsquash/png"],
},

Many libraries will use optimizeDeps to solve some issues.

This solution can solve my issue, no need to do more works. And the other suggestion is that you can add this to your README.md.

Thanks!