Issues with multi-threaded worker modules and Vite #37
Comments
|
Hi, is there now any workaround to use AVIF with Vite or maybe alternatives? |
|
Hi @Kam1k4dze, yes I do have one potential work around. As noted in the README I have released some special versions that you can install that should be compatible with Vite. You should be able to install with: Please let me know if that doesn't work for you 🙇 |
|
When I run When using version 1.3.0 |
|
@Kam1k4dze Are you trying to run this code on the serverside with Vite SSR? Your error message looks to be showing node import resolutions. If so, you should refactor your code to ensure the jSquash related code is only activated in the browser and is not executed during serverside rendering. Unfortunately, I am unsure with how this is done and you'll need to check the documentation or other information websites. If you do need serverside rendering, you're likely better off either pre-processing your images in Node.js or other tools or using a Node.js based image library like Squoosh Node.js library and Sharp. |
|
Yeah, you're right, I forgot that ssr was enabled on that page to test it. Thank you very much for your help in resolving my issue!❤️ |
|
The Vite v5 build output vite v4 output This workaround works if you don't need to use the webworker, because the workaround ignores building them and works with vite v4 and vite v5: import { defineConfig } from 'vite'
// https://github.com/vitejs/vite/blob/ec7ee22cf15bed05a6c55693ecbac27cfd615118/packages/vite/src/node/plugins/workerImportMetaUrl.ts#L127-L128
const workerImportMetaUrlRE =
/\bnew\s+(?:Worker|SharedWorker)\s*\(\s*(new\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\))/g
export default defineConfig({
optimizeDeps: {
exclude: ["@jsquash/avif", "@jsquash/jpeg", "@jsquash/jxl", "@jsquash/png", "@jsquash/webp"]
},
worker: {
format: 'es',
// https://github.com/vitejs/vite/issues/7015
// https://github.com/vitejs/vite/issues/14499#issuecomment-1740267849
plugins: [
{
name: 'Disable nested workers',
enforce: 'pre',
transform(code, id) {
if (code.includes('new Worker') && code.includes('new URL') && code.includes('import.meta.url')) {
return code.replace(workerImportMetaUrlRE, `((() => { throw new Error('Nested workers are disabled') })()`);
}
}
}
]
}
})Credit to @sapphi-red for providing the workaround. Also, huge thanks to @jamsinclair for creating the module, it's really fantastic work 🎉 |
@jaskaransarkaria I think you may have not installed the package correctly. Your stacktrace shows the file |
|
It seems like from Vite v5.2.2 this issue should be resolved. The following Vite config may need to be added: worker: {
format: "es"
}I'll update this issue once fully confirmed. |
|
I confirm that now I can successfully build project with |
|
hi, @jamsinclair, I found that the @jsquash/oxipng package still doesn't build properly with Vite, while other packages are fine. |
|
|
Thanks @Ice-Hazymoon. Thanks to updates in https://github.com/RReverser/wasm-bindgen-rayon we can now support Vite. I'll need to compile a new version of the oxipng codec and publish. I'll comment once completed 👍 |
|
@Ice-Hazymoon I've published a new version of Please let me know if that solves the issue 🙇 . Happy to help further, if not. The Vite dependency will need to be greater than |
When importing Oxipng, AVIF or JXL jSquash libraries with Vite the build fails to complete (Originally reported in #19)
These are upstream issues with Vite itself
Build fails when nested workers are present (Worker and build only error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve vitejs/vite#13367)Since fixed in Vite >= v5.0.0-beta.11I don't think this will be solved anytime soon so I hope to work on #33 in the near future
The text was updated successfully, but these errors were encountered: