[Solved] Vue 3 cannot import `@cornerstonejs/tools` , Error about `ICRPolySeg.wasm`

Support
1

My Question

Vue 3 use below will meet bug

import * as cornerstoneTools from "@cornerstonejs/tools";

window.cornerstoneTools = cornerstoneTools;

Bug

ERROR in ./node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm 
Module not found: Error: Can't resolve 'a' in '/Users/XXX/tmu/vue-cornerstone/node_modules/@icr/polyseg-wasm/dist'
 @ ./node_modules/@icr/polyseg-wasm/dist/index.js 2:0-37 17:17-21
 @ ./node_modules/@cornerstonejs/tools/dist/esm/workers/polySegConverters.js 10:0-43 34:25-35 62:30-40 130:30-40
 @ ./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/registerPolySegWorker.js 12:11-14:6
 @ ./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/computeAndAddRepresentation.js 7:0-64 10:2-23
 @ ./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/Surface/computeAndAddSurfaceRepresentation.js 2:0-77 6:9-36
 @ ./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/index.js 1:0-98 5:0-154
 @ ./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/index.js 13:0-44 14:0-304
 @ ./node_modules/@cornerstonejs/tools/dist/esm/index.js 10:0-63 14:0-1252
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 2:0-57 15:30-46
 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 6:49-55
 @ ./src/main.js 2:0-28 3:10-13

where the package.json is

"@babel/plugin-transform-class-static-block": "^7.24.1",
"@cornerstonejs/core": "1.66.9",
"@cornerstonejs/tools": "1.66.9",

the vue.config.js is

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    experiments: {
      syncWebAssembly: true
      asyncWebAssembly: true,
    }
  },
})

the babel.config.js is

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ["@babel/plugin-transform-class-static-block"]
}

What steps can we follow to reproduce the bug?

  1. I write he repo : https://github.com/tkt9k2562/vue-cornerstone , which can reproduce it.
    The command to start server is yarn serve
2

According this

The bug can be fixed by change to vite

1 Like
3

This is not solved at all.
In the link provided doesn’t provide the solution
Vite shows the same problem making the build

vite v5.3.2 building for production…
âś“ 2179 modules transformed.
x Build failed in 5.21s
error during build:
[commonjs–resolver] Could not load D:/Desktop/VueClient/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 Features | Vite for more details.
file: D:/Desktop/VueClient/node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/registerPolySegWorker.js
at Object.load (file:///D:/Desktop/VueClient/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:48099:13)
at file:///D:/Desktop/VueClient/node_modules/rollup/dist/es/shared/node-entry.js:19774:40
at async PluginDriver.hookFirstAndGetPlugin (file:///D:/Desktop/VueClient/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
at async file:///D:/Desktop/VueClient/node_modules/rollup/dist/es/shared/node-entry.js:18845:33
at async Queue.work (file:///D:/Desktop/VueClient/node_modules/rollup/dist/es/shared/node-entry.js:19884:32)

4

That vite config solved the build problem

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import vueI18n from '@intlify/unplugin-vue-i18n/vite'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import wasm from 'vite-plugin-wasm'

export default defineConfig({
  plugins: [
    vue(),
    wasm(),
    vuetify({
      autoImport: true
    }),
    vueI18n({
      include: resolve(__dirname, './locales/**'),
      runtimeOnly: false
    })
  ],
  define: { 'process.env': {} },
  css: {
    preprocessorOptions: {
      scss: { additionalData: ` @import "@/styles/variables.scss";` }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.d.ts', '.tsx', '.vue']
  },
  build: {
    target: 'esnext'
  },
  server: {
    port: 3000
  },
  worker: {
    format: 'es'
  },
  assetsInclude: ['**/*.wasm']
})