使用CornerstoneJS问题合集

一、报错“Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block` to your configuration.”

原因：需要添加“@babel/plugin-transform-class-static-block”包的引用

npm install @babel/plugin-transform-class-static-block

 安装后在项目根目录下会生成一个“babel.config.js”文件，在文件中添加代码：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset' //自动生成
  ],
  plugins: [
    "@babel/plugin-proposal-class-static-block" //这是重点，把包名加进去
  ]
}

 再次编译即可。

若是没有“babel.config.js”文件，找一下有没有“.babelrc”文件，配置是一样的。

二、编译时“@icr/polyseg-wasm/dist/ICRPolySeg.wasm”报错

原因：无法直接处理，需要使用wasm-loader。

在 Vue CLI 项目中配置 “wasm-loader” 以处理 WebAssembly (“.wasm”) 文件，你需要通过 Vue CLI 的 “configureWebpack” 或 “chainWebpack” 选项来修改 Webpack 配置。由于 “wasm-loader” 是一个 Webpack loader，它可以直接在 Webpack 配置中使用，而不需要像 Vite 插件那样特殊处理。

例1：(“chainWebpack”方式)

chainWebpack:config=>{
    config
    .module
    .rule('wasm')
    .test(/\.wasm$/)
    .type('javascript/auto') //或者使用'webassembly/experimental' 如果你的 webpack 版本支持
    .use('wasm-loader')
    .loader('wasm-loader')
    .options({ /* wasm-loader 的选项，如果有的话 */ })
    .end();
}

注意：不需要在 plugins 数组中添加 wasm-loader，因为它是通过 loader 的方式使用的。

例2：（“configureWebpack”方式）

configureWebpack: {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'javascript/auto', // 或者使用 'webassembly/experimental'
          use: {
            loader: 'wasm-loader',
            options: { /* wasm-loader 的选项，如果有的话 */ }
          }
        }
      ]
    }
  }

注意：不需要在 plugins 数组中添加 wasm-loader，因为它是通过 loader 的方式使用的。
在上述两种情况中，你都需要确保已经安装了 “wasm-loader”。如果还没有安装，可以通过 npm 或 yarn 来安装它：

npm install wasm-loader --save-dev

如果上述安装语句在安装过程中出现错误，需要卸载后再执行命令，卸载过程为：

npm uninstall wasm-loader

 然后查询是否还存在：

npm list wasm-loader

 确定不存在后再次安装：（去掉“--save-dev”）

npm install wasm-loader

安装出现警告内容没关系，不报错就行。

再次编译后即可通过。

以上部分解决思路来自一位博主，下面附上原文链接：
作者：小丸子_7043
链接：https://www.jianshu.com/p/d67dfc3fd53f
来源：简书