Vue3 无法导入 `@cornerstone/tools` ，错误为 `ICRPolySeg.wasm`

Question

在 Vue 3 中，我无法导入

@cornerstone/tools

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

package.json

在哪里

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

vue.config.js

是

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

babel.config.js

是

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

---

我不知道为什么

node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm

会打印这个bug。

在基石官方示例中：https://github.com/cornerstonejs/cornerstone3D/blob/main/utils/demo/helpers/initCornerstoneDICOMImageLoader.js#L7

下面的代码可以工作

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

window.cornerstoneTools = cornerstoneTools;

---

该错误可以在存储库中重现：https://github.com/tkt9k2562/vue-cornerstone

Answer 1

我用 vite 和 vue3 创建了一个项目，但我用 @icr\polyseg-wasm 遇到了同样的问题。

错误描述：

抛出新错误（[vite]：Rollup 无法解析来自“${id}”的导入“${exporter}”。 + ^

错误：[vite]：Rollup 无法解析来自“xxx/node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm”的导入“a”。 代码：'PLUGIN_ERROR'， 插件：'commonjs--resolver'， 钩子：'resolveId'， id: 'xxx/node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/registerPolySegWorker.js'

vite配置如下，还有其他需要配置的吗？

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

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