（vue3+vite+x6+x6-vue-shape）项目build后，访问时报 TypeError: l.createSvgDocument is not a function

[Trubasa]

Describe the bug

环境版本如下

"@antv/x6": "^1.34.6",
"@antv/x6-vue-shape": "^1.5.3",
"vite": "^2.3.7",
"vue": "^3.0.5",

使用vue编写的组件，作为节点渲染的渲染的内容
渲染的组件：

<template>
  <div
    ref="node_dom"
    class="TaskNode"
  >
    123
  </div>
</template>
<script lang="ts" setup>
import { Node } from '@antv/x6'
import { inject, onMounted, ref } from 'vue'

const row = ref(null)
const node_dom = ref(null)
onMounted(() => {
  const getNode = inject<Function>('getNode')
  const node:Node = getNode?.()
  row.value = node?.data
  node.on('change:data', ({ current }) => {
    row.value = current
  })
})
</script>
<style scoped lang="scss">
.TaskNode {

}
</style>

注册这个组件到x6

...
import { Graph as X6Graph } from '@antv/x6'
import TaskNode from './modules/TaskNode.vue'
...

X6Graph.registerNode(vue_shape_name, {
      inherit: 'vue-shape',
      x: 200,
      y: 150,
      width: 150,
      height: 60,
      component: TaskNode
   })

dev环境中中，改组件正确渲染
但是到build之后进行访问，会报如下问题

Your Example Website or App

null

Steps to Reproduce the Bug or Issue

1. dev环境体验正常
2. npm run build 打包
3. npm run preview 查看，发现报错

Expected behavior

正常情况应该不报错，跟dev环境表现一致。

Screenshots or Videos

No response

Platform

• OS:windows
• Browser:chrome
• Version: 107.0.5304.107

Additional context

No response

[x6-bot]

👋 @Trubasa

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Trubasa]

使用html渲染节点的时候，build后也会报该问题

this.render_data = {
      id: this.node_data.id,
      x: this.node_data.x,
      y: this.node_data.y,
      width: 250,
      height: 50,
      shape: 'html',
      // shape: NodeShape.__name,
      html: () => {
        const dom = document.createElement('div')
        dom.style.background = 'transparent'
        dom.innerHTML = `${this.node_data.topic}`
        return dom
      },
      data: this.node_data
    }
this.x6node = this.x6graph.addNode(this.render_data)

[Trubasa]

破案了，是因为引入了x6-vue-shape导致，vue3引入x6-vue-shape后，在dev下还需要配置别名才可正常使用，而这个别名在build的时候会导致打包内容异常。
给打包配置添加环境判断逻辑即可
vite.config.ts

...
export default defineConfig(({ command, mode }) => {
  const resolve_alias = {}

  if (mode === 'development') { // x6的vue-shape 插件比较奇怪，需要在开发环境下配置这段才能生效，而生产环境如果使用这段则会报错
    resolve_alias['@antv/x6'] = '@antv/x6/lib'
    resolve_alias['@antv/x6-vue-shape'] = '@antv/x6-vue-shape/lib'
  }

  resolve_alias['@'] = path.resolve(__dirname, 'src')
  resolve_alias['./assets'] = path.resolve(__dirname, 'public/assets')
...
  
  return {
     ...
    resolve: {
      alias: resolve_alias
    }
     ...
  }


})

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.