🔎 在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 https://vitejs.dev/guide/features.html#webassembly for more details.

🎯 臨時解決方案

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

📡 官方進度

關注：https://github.com/cornerstonejs/cornerstone3D/issues/1071

---

🔎 在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": "^版本號"}
}

2. 配置 Vite 以確保正確的依賴解析

// vite.config.js
import { defineConfig } from 'vite';export default defineConfig({resolve: {alias: {'@cornerstonejs/core': require.resolve('@cornerstonejs/core'),},},
});

通過以上配置解決循環依賴中，模塊變量無法訪問的問題