vite项目下，安装引入@antv/x6-vue-shape会报错

[yetingfeng]

Describe the bug

只安装@antv/x6正常，安装x6-vue-shape后会报错

button.ts:10 Uncaught TypeError: Cannot read properties of undefined (reading 'ToolItem')；

Your Example Website or App

https://codesandbox.io/s/vibrant-mendeleev-vwbux

Steps to Reproduce the Bug or Issue

1、安装@antv/x6-vue-shape
2、import { Graph } from "@antv/x6";
3、报错button.ts:10 Uncaught TypeError: Cannot read properties of undefined (reading 'ToolItem')；

Expected behavior

能正常引入

Screenshots or Videos

No response

Platform

• OS: Windows10
• Browser: Chrome

Additional context

No response

[x6-bot]

👋 @yetingfeng

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]

vite 问题，这里有解决方案：vitejs/vite#3413 (comment)

[Hfutsora]

vite 问题，这里有解决方案：vitejs/vite#3413 (comment)

{
        find: '@antv/x6',
        replacement: '@antv/x6/dist/x6.js'
},

今天试了，replacement: @antv/x6/lib 不起作用，请设置为 @antv/x6/dist/x6.js，否则 build 后会产生错误。

[taomas]

使用vite preview或者vite build，还是不能正常展示，请问这个问题有解决方案吗。

[Hfutsora]

确认你的 alias 配置正确，及 vite, esbuild 版本 https://github.com/vitejs/vite/issues/3413#issuecomment-854301330。

[taomas]

alias 确认配置正确了，dev 情况下可以正常展示了，但是 vite preiview 没办法展示，和 issues 里面出现了一样的问题。

[Hfutsora]

可以看一下我的项目 https://github.com/soraLib/sa-form/blob/main/vite.config.ts 配置，可以作为你的参考

[taomas]

感谢，你的项目确实可以正常 preview，我参考一下看看~

[taomas]

我遇到的问题解决了，更新一下解决方案。

alias 正常配置后，只有通过 tsx 文件进行 render 的自定义组件，build 后能正常展示，如果通过 template 来渲染，build 之后则无法正常显示。

例子：

// FlowNode.tsx文件

import '@antv/x6-vue-shape';
// FlowNode.vue 为自定义组件
import FlowNode from './FlowNode.vue';

export const getFlowNode = (data = { name: '示例组件' }) => {
  return {
    shape: 'vue-shape',
    x: 400,
    y: 48,
    width: 180,
    height: 40,
    component: {
     // build后preiview，可被正常渲染
      render: () => {
        return <FlowNode name={data.name} />;
      },
     // 使用template则不能被正常渲染
      // template: `<FlowNode :name="name"></FlowNode>`,
      // data() {
      //   return {
      //     name: '示例组件',
      //     ...data,
      //   };
      // },
      // components: {
      //   FlowNode,
      // },
    },
  };
};

相关 vite.config.ts 的 alias 配置

resolve: {
  alias: [
    {
      find: '@',
      replacement: path.resolve(__dirname, './src'),
    },
    {
      find: '@antv/x6',
      replacement: '@antv/x6/dist/x6.js',
    },
    {
      find: '@antv/x6-vue-shape',
      replacement: '@antv/x6-vue-shape/lib',
    },
  ],
}

[Huauauaa]

Thanks @taomas

import { h } from 'vue';
import { Graph } from '@antv/x6';
import '@antv/x6-vue-shape';
import GraphNode from './GraphNode.vue';

Graph.registerNode(
    'graph-node',
    {
      inherit: 'vue-shape',
      width: 200,
      height: 50,
      component: {
        render: () => {
          return h(GraphNode);
        },
      },
    },
    true,
  );

[lulei90]

最优解参考： vitejs/vite#3413 (comment)
不用调整reslove参数配置
建议在官方文档常见问题中更新下 此类问题在搭配使用vite中必现 @NewByVector

[NewByVector]

@lulei90 👍 已经加入到常见问题。

[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.