[Bug] vite + vue3 + worker + wasm

[Qwd2017]

Describe the Bug

I want to convert labelmap segmentation to contour, but there is something wrong with @iCr\polyseg-wasm.

Steps to Reproduce

1.create a project with vite+vue3
2.install cornerstone3D to project
3.copy and modify demo source code(https://www.cornerstonejs.org/live-examples/polysegwasmvolumelabelmaptocontour) to project
4.run build

vite configuration is as follows:

import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";

return {
plugins: [
vue(),
wasm(),
],
worker: {
plugins: [wasm()],
},
};

The current behavior

throw new Error([vite]: Rollup failed to resolve import "${exporter}" from "${id}".\n +
^

Error: [vite]: Rollup failed to resolve import "a" from "xxx/node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm".
code: 'PLUGIN_ERROR',
plugin: 'commonjs--resolver',
hook: 'resolveId',
id: 'xxx/node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/registerPolySegWorker.js'

The expected behavior

The project can be successfully built.

OS

win10 20H2

Node version

v18.16.0

Browser

Chrome 124.0.6367.119

[shunia]

You are so lucky that I just fixed this and by accident I'm here seeing this issue, use @rollup/plugin-wasm instead:

import { wasm } from "@rollup/plugin-wasm";

return {
  worker: {
    plugins: () => [wasm({ sync: ["ICRPolySeg.wasm"] })],
  },
  plugins: [wasm({ sync: ["ICRPolySeg.wasm"] })]
};

Edit: The api of workers might be different according to your vite version(4 or 5)

[Qwd2017]

@shunia Hi, thanks for your reply. I can make my project built with your guidance, but there is something error when I create and initialize ICRPolySeg object. The ICRPolySeg object cannot be initialized.

[IrvingLu]

Hello, the OP is my colleague.
We have tried the plan you mentioned. This solution can compile successfully under vite5, but vite4 still fails. And I would like to ask, have you ever tried converting contour to labelmap under this framework? Have you tried this example https://www.cornerstonejs.org/live-examples/polysegwasmvolumelabelmaptocontour
I am unable to use this example correctly.
Also, I see that your address is Beijing. Can you leave a contact information? WeChat or email, we can discuss related issues together

[IrvingLu]

Hello, the OP is my colleague. We have tried the plan you mentioned. This solution can compile successfully under vite5, but vite4 still fails. And I would like to ask, have you ever tried converting contour to labelmap under this framework? Have you tried this example https://www.cornerstonejs.org/live-examples/polysegwasmvolumelabelmaptocontour I am unable to use this example correctly. Also, I see that your address is Beijing. Can you leave a contact information? WeChat or email, we can discuss related issues together

When I use labelmap to convert to contour, the file under woker will become like this

[sedghi]

Since there are many other people complaining about web workers and Vite as well, I'm adding this here.

vitejs/vite#8427

[sedghi]

I'm working on cornerstone3D 2.x and have made progress in removing circular dependencies and publishing the types for the DICOM image loader. I'm trying to make it work with Vite, but there are numerous issues with Vite in dev mode, which are not directly related to Cornerstone. Multiple mentions of Vite problems with import.meta.url, web workers, and WebAssembly can be found on the Vite GitHub repository:

https://github.com/vitejs/vite/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+import.meta.url

I have started a template project for Vite, React, and cornerstone3D beta 2.x here. I appreciate your help in making it work.

https://github.com/cornerstonejs/vite-react-cornerstone3d

[Qwd2017]

@sedghi Hi, I have tried a ugly method to resolve this problem since Vite does not support import wasm through import.meta.url. I uploaded a demo here https://github.com/Qwd2017/icrdemo.

[sedghi]

@Qwd2017 I can't see the config, https://github.com/Qwd2017/icrdemo/blob/main/icrdemo/vite.config.ts

Can you make sure the code is pushed?

[Qwd2017]

The file contents are as follows.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { join } from "path";
import cp from "vite-plugin-cp";

function resolve(dir: string) {
return join(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
cp({
hook: "buildStart",
targets: [
{
src: "node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.js",
dest: "src/polyseg/",
},
{
src: "node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm",
dest: "./",
},
{
src: "node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm",
dest: "./public",
},
],
}),
],
resolve: {
alias: {
"@cornerstonejs/tools": "@cornerstonejs/tools/dist/umd/index.js",
"@": resolve("src"),
"@cornerstonejs/dicom-image-loader":
"@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js",
"@icr/polyseg-wasm": resolve("src/polyseg/index.js"),
},
},
});

[kenny-reyes]

I'm working on cornerstone3D 2.x and have made progress in removing circular dependencies and publishing the types for the DICOM image loader. I'm trying to make it work with Vite, but there are numerous issues with Vite in dev mode, which are not directly related to Cornerstone. Multiple mentions of Vite problems with import.meta.url, web workers, and WebAssembly can be found on the Vite GitHub repository:

https://github.com/vitejs/vite/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+import.meta.url

I have started a template project for Vite, React, and cornerstone3D beta 2.x here. I appreciate your help in making it work.

https://github.com/cornerstonejs/vite-react-cornerstone3d

Are there breaking changes in APIs using cornerstone3D 2.0? So, is it easy to update from v1?

@sedghi I already made a nice scaffolding for VUE3+Vite5+Vuetify3+Pinia+CornerStone3D, all last versions, similar to
https://github.com/Kitware/VolView?tab=readme-ov-file

[kenny-reyes]

There is a workaround posted in the cornerstone Slack channel by Adrien that works for production:
Vite config add the following:

    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: '.'
          }
        ]
      })
    ],

 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'
        },
        {
          find: '@',
          replacement: resolve('src/renderer/src')
        }
      ]
    },

This worked for me in

• Electron + Vite 5 + Vue3 + Cornnerstone3D (core, tools and dicom-image-loader) scaffolding for production and dev
• SPA Vue3 + Vite 5 + Cornnerstone3D (core, tools and dicom-image-loader) scaffolding for production and dev

[sedghi]

You can now safely use Cornerstone3D with WebAssembly and everything in Cornerstone3D 2.0. See here.