View in #cornerstone3d on Slack
@Kenny_Reyes_Borrueco: @Alireza_Sedghi did you find some solution for the problem of webworkers + Vite + cornerstone3d (tools mostly)?
@Adrien: Hi, we’re using cornerstone with vite. It needs a bit of hacking but happy to help.
@Caliban3010: @Adrien I have a problem too. What is your configuration to make it work ?
My problem is that polySegConverters are not working when CS tries to convert labelmap to surface
I have tried the solutions available on github, but none worked
@Adrien: Hmm I’m not using those… there were some issues related to web workers and webpack automatic public path detection, can you check if your web inspectors if you see requests for a index.worker.something with a url that looks weird? You also need to use vite’s copy plugin to copy those files in place, since they don’t get bundled.
looking at our vite config, it seems there are two snippets of config needed to make things work, one for the dev server and one for rollup (production bundling):
First hack is to use the ready-made browser build (bundled with webpack) of Cornerstone tools, instead of having rollup trying to bundle Cornerstone tools itself
resolve: {
alias: [
// Rollup can't bundle Cornerstone3D because of circular dependencies.
//
// See <https://github.com/cornerstonejs/cornerstone3D/issues/742>
...(process.env.NODE_ENV === "production"
? [
{
find: "@cornerstonejs/core",
replacement: "./node_modules/@cornerstonejs/core/dist/umd/index.js",
},
{
find: "@cornerstonejs/tools",
replacement: "./node_modules/@cornerstonejs/tools/dist/umd/index.js",
},
]
: []),
{
// The worker bundling in the dicom loader is webpack specific, hack around it
find: /^\/([^/]+).worker\.js(.map)?$/,
replacement: "./node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/$1.worker.js$2",
},
],
},
Second hack is to copy the worker files in the target directory, add this to your plugins[] array:
// import { viteStaticCopy } from "vite-plugin-static-copy";
// plugins: [
viteStaticCopy({
targets: [
{
src: "node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/*.wasm",
dest: ".",
},
{
src: "node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/*.worker.js",
dest: ".",
},
],
}),
ah hmm the worker stuff is in our case for the image loader, but if I’m not mistaken some polyseg stuff uses workers as well, so you might have to slightly adapt what I posted above for your use case.
@Caliban3010: I’ll try this thanks
@Adrien: I’d first check that your issue is related to workers, looking at the network panel of the web inspector though
failed load requests for index.worker.something → you need the vite copy stuff
random undefined things → probably an issue with rollup bundling, you need the resolve stuff
@Caliban3010: The failing request is http://localhost:5173/workers/polySegConverters?worker_file&type=classic
It returns the index.html since it does not found anything else
@Adrien: hmm I’ve never seen those URLs before… I wonder what the “worker_file” and “type” parameters are for. But maybe if you copy the right file there, it just works :shrug:
maybe try to add a new resolve block that matches /workers/polySegConverters and resolves to node_modules/@cornerstonejs/tools/dist/cjs/workers/polySegConverters.js ? untested random guess though
@Kenny_Reyes_Borrueco: Oh!, Thanks to you both. I’ve been looking for a solution for 5 days
I have this configuration, but can’t say it is my current configuration because I’ve variated it several times already
this is one
// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import { wasm } from '@rollup/plugin-wasm'
// Utilities
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()]
},
renderer: {
resolve: {
alias: {
'@': resolve('src/renderer/src')
}
},
plugins: [
vue(),
wasm({ sync: ['ICRPolySeg.wasm'] }),
vuetify({
autoImport: true
}),
VueI18nPlugin({
include: resolve(__dirname, './locales/**')
})
],
css: {
preprocessorOptions: {
scss: { additionalData: ` @import "@/styles/variables.scss";` }
}
},
worker: {
format: 'es',
plugins: () => [wasm({ sync: ['ICRPolySeg.wasm'] })]
}
}
})
@Adrien: but are you still running into issues now?
@Kenny_Reyes_Borrueco: And another
// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import wasm from 'vite-plugin-wasm'
import worker from 'vite-plugin-worker'
// Utilities
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()]
},
renderer: {
resolve: {
alias: {
'@': resolve('src/renderer/src')
}
},
plugins: [
vue(),
wasm(),
worker,
vuetify({
autoImport: true
}),
VueI18nPlugin({
include: resolve(__dirname, './locales/**')
})
],
css: {
preprocessorOptions: {
scss: { additionalData: ` @import "@/styles/variables.scss";` }
}
},
worker: {
format: 'es'
},
assetsInclude: ['**/*.wasm']
}
})
Yes I have problems when I use the tools and any of these tools use the webworkers. I need to finish trying your suggestions by the way
I also create and example:
- Clone repo: https://github.com/kenny-reyes/Cornerstone3d-vue-electron
- install volta (https://volta.sh/)
- execute yarn
- execute yarn build:win or yarn build:linux
- Execute the application file
Volta - The Hassle-Free JavaScript Tool Manager
kenny-reyes/Cornerstone3d-vue-electron
I will come back to you after trying the suggestions provided