vue2框架，使用@antv/x6-vue-shape加载组件，弄好以后，npm发包，各种异常

[LuckyTaoTao]

Describe the bug

不npm发包是正常的，发包以后就各种异常，首先是显示vue-demi不存在，然后下载包以后，createAPP不存在，把源码内容，涉及到的vue3判断注释掉以后，不再报错，但是拖拽不显示组件内容，拖拽进来的组件只会显示定义好的连接桩

Your Example Website or App

无

Steps to Reproduce the Bug or Issue

1、开发好组件
2、进行 "lib": "vue-cli-service build --target lib ./packages/index.js" 打包
3、引用
4，报错

Expected behavior

修复好

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 2.11.1]

Additional context

No response

[x6-bot]

👋 @LuckyTaoTao

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.

[NewByVector]

能否用 codesanbox 搞个复现环境？

[LuckyTaoTao]

这是https://codesandbox.io/p/sandbox/solitary-snowflake-g8x6kv，执行yarn run lib 编译，然后报的一个vue-demi 的异常，我本地没有这个报错，解决了这个问题以后，等程序打包完成以后，把打完完成的代码引入main里边，出现异常

[NewByVector]

看下有没有熟悉 vue 的朋友解答一下呀。

[lloydzhou]

感觉还是vue-demi带来的问题（因为@antv/x6-vue-shape依赖这个）

[LuckyTaoTao]

已解决，还是vue-demi的问题

看下有没有熟悉 vue 的朋友解答一下呀。

[NewByVector]

能否分享一下解决思路呢🥳。

[LuckyTaoTao]

根据vue-demi官网，然后需要在webpack 中添加以下规则，否则编译的时候会出现一些方法不匹配的问题
configureWebpack: {
module: {
rules: [
{
test: /.mjs$/,
include: /node_modules/,
type: "javascript/auto",
},
],
}
},

[lloydzhou]

我没有找到这个vue-demi的解决办法，就拿另一个包试了试，不管是直接预览还是打包lib都没有问题。

https://github.com/lloydzhou/x6-html-shape
就是我自己写的可以兼容vue2/vue3/react/17/react18/svelte这些不同框架注册自定义节点的包

import { register } from '@antv/x6-vue-shape'
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: CustomNode,
})

改成以下代码

import { register } from "x6-html-shape/dist/fobject";
import createRender from 'x6-html-shape/dist/vue2'
import CustomNode from './component/label.vue'
const render = createRender(CustomNode)
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    render,
})

[LuckyTaoTao]

https://codesandbox.io/p/sandbox/kind-hooks-r8ng4z 这是我处理好的demo，如果把vue.config.js里边的配置去掉，就会有问题了

[LuckyTaoTao]

我没有找到这个vue-demi的解决办法，就拿另一个包试了试，不管是直接预览还是打包lib都没有问题。

https://github.com/lloydzhou/x6-html-shape
就是我自己写的可以兼容vue2/vue3/react/17/react18/svelte这些不同框架注册自定义节点的包

import { register } from '@antv/x6-vue-shape'
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: CustomNode,
})

改成以下代码

import { register } from "x6-html-shape/dist/fobject";
import createRender from 'x6-html-shape/dist/vue2'
import CustomNode from './component/label.vue'
const render = createRender(CustomNode)
register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    render,
})

谢谢！已经处理好了，你这个使用html的形式注入可行，用vue的component的直接注入确实有点问题，主要还是vue-demi得配置问题，会报错找不到一系列内置方法

[lloydzhou]

使用html注入有优点也有缺点：

1. html注入，比foreignObject性能要好（毕竟foreignObject要在内部再创建body，理论上是一个新的文档流了）

2. 在html里面注入，没有兼容性问题（例如x6常见问题里面提到的使用foreignObject的样式问题等...还有不同浏览器对foreignObject支持程度也不一致...）

3. 但是用html注入，边的层级永远低于节点层级（无论如何调整zIndex都不能让边的层级高于节点）

4. 还有一个问题是，这个注入毕竟是一个第三方的库，如果要导出文档，官方内置的导出方法是读取不到节点内部的元素的。

5. 不过，这个库提供了x6-html-shape/dist/fobject，用这个注册节点，就会切换到foreignObject的模式，只是不依赖vue-demi了而已。

[MXiao1995]

1.antv x6使用的是2.的版本，前端项目是vue2的版本，使用的webpack打包
2.前端打成js后，将js拷贝到后端springboot项目的static目录下，启动项目，访问后端资源可以正常显示节点
3.将后端项目打包成jar包后，启动jar包不能正常显示节点