记录vite项目中Cornerstone的兼容问题（持续更新）

在vite项目中打包提示错误

ESM integration proposal for Wasm" is not supported currently.

⛳️ 问题描述

Error: Could not load /home/xxx/xxx/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 vitejs.dev/guide/featu… for more details.

🎯 临时解决方案

import { defineConfig } from "vite";

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

📡 官方进度

关注：github.com/cornerstone…

在vite项目中由于循环引用导致影像无法显示的问题

failed Error: loadImageFromImageLoader: no image loader for imageId

⛳️ 问题描述

在vite项目中安装1.4X.X+版本的Cornerstone时，一直会有以下报错信息：

📡 问题定位

在代码调试时，可以看到以下调试信息，在ImageLoader文件中，imageLoaders变量是一个模块内的全局变量，通过调用注册函数初始化

• imageLoaders 变量声明（Cornerstone源码中实现）

// node_modules/@cornerstonejs/core/src/loaders/imageLoader.ts
export function registerImageLoader(
  scheme: string,
  imageLoader: ImageLoaderFn
): void {
  // imageLoaders 为全局变量，通过调用 registerImageLoader 这个函数初始化
  imageLoaders[scheme] = imageLoader;
}

• imageLoaders 初始化（项目代码中实现,即调用上面声明的这个函数）

cornerstone.imageLoader.registerImageLoader('wadouri', cornerstoneDICOMImageLoader.wadouri.loadImage);

在执行完该步骤后，imageLoaders中应该含有'wadouri'属性的对象，但是在debugger中查看 imageLoaders 依旧为undefined

查看调试中的imageLoaders变量，发现文件指向 node_modules/@cornerstonejs/streaming-image-volume-loader/node_modules/@cornerstonejs/core/src/loaders/imageLoader.ts， 即 我们执行的上述【imageLoaders 初始化】过程是初始化了项目node_modules中的imageLoaders变量，但是在渲染dicom文件时，调用的是@cornerstonejs/streaming-image-volume-loader 库中自己node_modules下的imageLoaders变量。

✨✨✨ 结论：Vite 基于 ES 模块，每个模块都是在其自己的作用域中执行的，所以在不同的目录中初始化的变量只能在自己的作用域中生效。

🎯 解决方案

1. 确保两个库使用的是同一个 @cornerstonejs/core 实例：即@cornerstonejs/core 在整个项目中只被加载一次,可以通过设置 package.json 的 resolutions 字段来强制使用同一版本。

{
  "resolutions": {
    "@cornerstonejs/core": "^版本号"
  }
}

1. 配置 Vite 以确保正确的依赖解析

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@cornerstonejs/core': require.resolve('@cornerstonejs/core'),
    },
  },
});

通过以上配置解决循环依赖中，模块变量无法访问的问题