[Bug] decodeImageFrameWorker fails to load Vue+Vite+Nuxt

[yaroslavskriaga]

Describe the Bug

Hello, thanks for the project and amazing technology you build. I am working on the prototype of the viewer using Cornerstone3D. I found out, that after upgrading to the latest, it stopped working. I have a black box instead of an image.

Important notes about setup:

1. Cornerstone3D and Viewer are inside a separate npm package which I install in the 'Main application'.
2. 'Main application' is a Nuxt application and consumes a package via npm install.
3. I did my own research and basically copied version and all of the dependencies from https://github.com/cornerstonejs/vue-cornerstone3d.
4. Inside a package from p.1 with Cornerstone3D, I have viteCommonjs() under plugins, optimizeDeps as per the example repository from p.3, worker object contains format: 'es' and external is ['@icr/polyseg-wasm'].
5. I was also following a migration guide and I put cornerstoneDICOMImageLoader.init({}) as it is a new approach now.

As a last note, It suddenly stopped working after an update to the latest version. Previous version was 1.85 and it didn't contain anything that is required now and was working perfectly. I only had this line under resolve: '@cornerstonejs/tools': '@cornerstonejs/tools/dist/umd/index.js' which I obviously removed for now.

Am I missing something?

Steps to Reproduce

Sorry, currently I don't have a sharable link with the reproduction. I hope, my description covers most of the questions.

1. Create a npm package and put a cornerstone viewer there.
2. Create a separate Nuxt application and npm install the package from p1.
3. You will notice that decodeImageFrameWorker resolves with a content type text/html and results in error in a console

The current behavior

In the console, it says Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The expected behavior

No error about the decodeImageFrameWorker and it works all together with the given setup

OS

MacOs 14.6.1

Node version

18.17.1

Browser

Chrome 133.0.6943.98

[sedghi]

Have you checked this https://www.cornerstonejs.org/docs/getting-started/vue-angular-react-etc

[sedghi]

There was a silly mistake for 3.0.2 which we had another package published under the same version. Can you try the latest latest ?

[yaroslavskriaga]

@sedghi Thanks for your fast reply

There was a silly mistake for 3.0.2 which we had another package published under the same version. Can you try the latest latest ?

Yes, I am on the latest versions:

• "@cornerstonejs/core": "^3.0.4",
• "@cornerstonejs/dicom-image-loader": "^3.0.4",
• "@cornerstonejs/tools": "^3.0.4",
• "vite": "^5.4.10".
• "vue": "^3.5.12",
• "vue-tsc": "^2.1.6"

I am still having the same results.

Have you checked this https://www.cornerstonejs.org/docs/getting-started/vue-angular-react-etc

Yes, I have the proposed setup and this is how my vite config looks like:

`import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import { fileURLToPath } from 'node:url';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'node:path';
import dts from 'vite-plugin-dts';
import path from 'path';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
assetsInclude: ['**/*.wasm'],
plugins: [
vue(),
dts(),
viteCommonjs(),
libInjectCss({
formats: ['es'],
entry: {
index: 'app/index.ts'
},
rollupOptions: {
output: {
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'assets/[name][extname]'
}
}
}),
nodePolyfills({
globals: {
Buffer: true
},
protocolImports: true
})
],
build: {
lib: {
entry: {
index: resolve(__dirname, 'app/index.ts')
}
},
rollupOptions: {
external: ['vue', 'pinia'],
output: {
globals: {
vue: 'Vue',
pinia: 'pinia'
}
}
//
}
},
optimizeDeps: {
exclude: ['@cornerstonejs/dicom-image-loader'],
include: ['dicom-parser']
},
resolve: {
alias: {
'@': path.resolve(__dirname, './app'),
'@root': fileURLToPath(new URL('./', import.meta.url)),
'@cornerstonejs/core': fileURLToPath(new URL('node_modules/@cornerstonejs/core/dist/esm', import.meta.url))
}
},
worker: {
format: 'es',
rollupOptions: {
external: ['@icr/polyseg-wasm']
}
}
})`

An error I shared above, in the console, eventually has this link /_nuxt/@fs/assets/decodeImageFrameWorker-CIVkzJIZ.js?worker_file&type=module. I am not sure what it can be/ what is the relation it has with the config and the code itself.

Is there anything I am probably missing? Any hints that I should try/take a look at? Thanks in advance

[yaroslavskriaga]

@sedghi just to add a little more details:

Sorry for the duplication, but when having this error, and when trying to use a some tool(window level in my example), I am having another error but this, I believe, a consequence from the first error that apparently signals that worker did not work hence Viewport is not a valid type

[sedghi]

Can you create a mini repo?