[Bug] Cornerstone3D tools does not build with vite

[PintoGideon]

Describe the Bug

I am currently using cornerstone3D in a react app. I get this error when running an npm run build during build:

Error: Could not load /home/gideonp/ChRIS_ui/node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm (imported by node_modules/@icr/polyseg-wasm/dist/index.js): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
    at Object.load (file:///home/gideonp/ChRIS_ui/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62695:19)
    at file:///home/gideonp/ChRIS_ui/node_modules/rollup/dist/es/shared/node-entry.js:18692:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///home/gideonp/ChRIS_ui/node_modules/rollup/dist/es/shared/node-entry.js:18592:28)
    at async file:///home/gideonp/ChRIS_ui/node_modules/rollup/dist/es/shared/node-entry.js:17762:33
    at async Queue.work (file:///home/gideonp/ChRIS_ui/node_modules/rollup/dist/es/shared/node-entry.js:18802:32)

I tried instaling vite-plugin-wasm with no luck. Anyone else seeing this error ?

Steps to Reproduce

1. Install Vite and the cornerstone3D tools
2. npm run build

The current behavior

N/A

The expected behavior

N/A

OS

Linux

Node version

Nodejs 20.7

Browser

Chrome

[jennydaman]

I'm @PintoGideon's coworker.

For anyone else here looking for a workaround, see https://github.com/FNNDSC/ChRIS_ui/pull/1060

UMD seems to be working but ESM (the default) does not. So create an alias in vite.config.ts to prefer the UMD build of @cornerstonejs/tools:

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@cornerstonejs/tools": "@cornerstonejs/tools/dist/umd/index.js"
    },
  },
});

[jlopes90]

https://github.com/cornerstonejs/cornerstone3D/issues/1067#issuecomment-1973384485

[sedghi]

seems like someone tried this and works for now

alias: { '@cornerstonejs/tools': '@cornerstonejs/tools/dist/umd/index.js' } }`

[jlopes90]

The umd works, but the problem is compressed and it doesn't seem to have a source map.

[sedghi]

I know :( we will fix it in next version since it will be a breaking change

[fanhenghui]

seems like someone tried this and works for now

alias: { '@cornerstonejs/tools': '@cornerstonejs/tools/dist/umd/index.js' } }`

The code can be bundled, but it cannot run properly.

[desprit]

While the "alias" workaround fixes some issues the current version still cannot run on vitest for example and gives the following error:

Module node_modules/@cornerstonejs/core/src/index.ts:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@cornerstonejs/core" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

Are there plans for a proper fix?

[Qwd2017]

"node_modules@cornerstonejs\tools\src\workers\polySegConverters.js" is not packed to umd module and polyseg worker is not worked

[sedghi]

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

https://github.com/vitejs/vite/issues/8427

[vincent1996]

I modified the registerPolySegWorker.js code: can be build， But there are still errors when starting in Nginx

[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

[T-en1991]

seems like someone tried this and works for now

alias: { '@cornerstonejs/tools': '@cornerstonejs/tools/dist/umd/index.js' } }`

@sedghi There is no umd file in version 2 or above How to solve it? （Vue+Vite）

[sedghi]

Look at the dedicated vite configs https://www.cornerstonejs.org/docs/getting-started/vue-angular-react-etc