Vue2项目从Vue Cli迁移至Vite后GoJS 2.1.51报错求助

问题场景 #

大型Vue2项目从Vue Cli迁移到Vite后，唯一无法正常工作的依赖是GoJS 2.1.51。调用sd.diagram.groupTemplateMap.add(...)时触发如下报错：

chunk-JHIOXJJP.js?v=d4bd4acf:2020 TypeError: Cannot set property layer of [object Object] which has only a getter
    at Aj (gojs.js?v=507ae5dd:12130:16)
    at Rl (gojs.js?v=507ae5dd:16930:13)
    at Pl (gojs.js?v=507ae5dd:16876:136)
    at Object.initGraph (bizStore.js:133:5)
    at VueComponent.mounted (valueNetwork.vue:165:1)
    at invokeWithErrorHandling (chunk-JHIOXJJP.js?v=d4bd4acf:1991:57)
    at callHook$1 (chunk-JHIOXJJP.js?v=d4bd4acf:2584:7)
    at Object.insert (chunk-JHIOXJJP.js?v=d4bd4acf:6226:11)
    at invokeInsertHook (chunk-JHIOXJJP.js?v=d4bd4acf:4441:31)
    at VueComponent.patch2 [as __patch__] (chunk-JHIOXJJP.js?v=d4bd4acf:4608:5)

切回Vue Cli环境则一切正常，仅Vite下出现该问题。

可行的解决思路 #

1. 配置Vite转译GoJS依赖 #

Vite默认不转译node_modules中的包，GoJS 2.1.51的代码可能与Vite的ES模块打包逻辑冲突。在vite.config.js中添加以下配置：

export default {
  optimizeDeps: {
    include: ['gojs']
  },
  build: {
    commonjsOptions: {
      include: [/gojs/, /node_modules/]
    }
  }
}

配置完成后重启Vite服务，验证问题是否解决。

2. 调整GoJS版本 #

GoJS 2.1.51可能存在特定版本的兼容性bug，尝试升级到2.3.x及以上的稳定版本，或降级到2.1系列中更早的稳定版本，看是否能绕过该报错。

3. 改用UMD方式引入GoJS #

绕开Vite的模块打包逻辑，直接在项目的index.html中引入GoJS的UMD脚本：

<script src="https://unpkg.com/gojs@2.1.51/release/go.js"></script>

之后在Vue组件中直接通过全局变量go使用GoJS：

const $ = go.GraphObject.make;
// 原GoJS业务代码保持不变，直接调用即可

这种引入方式与Vue Cli环境下的逻辑更接近，大概率能解决兼容性问题。

4. 临时禁用Tree Shaking #

如果是Vite的Tree Shaking误删了GoJS的必要属性或方法，可在vite.config.js中临时关闭该功能：

export default {
  build: {
    rollupOptions: {
      treeshake: false
    }
  }
}

注意：此方式会增大打包体积，仅适合临时验证问题根源，不建议长期使用。

验证步骤 #

修改配置或引入方式后，重启Vite服务，重新执行触发报错的代码，检查是否恢复正常。若使用UMD引入方式，需移除之前的import go from 'gojs'语句。

内容的提问来源于stack exchange，提问作者Stephen Rich