Ronbb
commented
3 years ago vite 2.2.4 is ok. 😂
Closed Ronbb closed 2 years ago
Ronbb
commented
3 years ago vite 2.2.4 is ok. 😂
jtsang4
commented
3 years ago Encounter the same problem, this is my repo to reproduce it: https://github.com/wtzeng1/graph-editing-playground/tree/vite-issue
git checkout vite-issue
lerna bootstrap
cd packages/x6
yarn devDowngrade to vite@2.2.4 solve this problem temporarily.
ygj6
commented
3 years ago It seems that the esbuild upgrade caused this problem. I have tried to downgrade esbuild to ^0.9.3 in vite, and can also solve this problem. Here is another similar issue: https://github.com/vitejs/vite/issues/3399
Ronbb
commented
3 years ago vite 2.3.7 not work
patak-dev
commented
3 years ago @Ronbb #3718 will be released as part of vite 2.3.8
Ronbb
commented
3 years ago @patak-js
Bug not fixed with the same error.
% yarn why vite
└─ @cosmical/web@workspace:packages/web
└─ vite@npm:2.3.8 (via npm:^2.3.8)
% yarn why esbuild
└─ vite@npm:2.3.8
└─ esbuild@npm:0.12.9 (via npm:^0.12.8)
mdugue
commented
3 years ago @Ronbb were you successfull working around that problem?
Ronbb
commented
3 years ago @mdugue not yet, sorry
PuffMeow
commented
3 years ago I met the same problem, the version of vite 2.4.1
PuffMeow
commented
3 years ago vite 2.2.4 is ok. 😂
I can't solve this same problem when I use vite 2.2.4
Ronbb
commented
3 years ago vite 2.2.4 is ok. 😂
I can't solve this same problem when I use vite 2.2.4
Check the version of esbuild:
yarn why esbuild
xinzi1990
commented
3 years ago 有解决的方案了吗？各位大佬
Ronbb
commented
3 years ago 有解决的方案了吗？各位大佬
@xinzi1990
目前只能降级到2.2.4
Only downgrade to 2.2.4
Ronbb
commented
3 years ago It seems a bug from yarn2 pnp and @yarnpkg/esbuild-plugin-pnp. Just don't use vite with yarn2 pnp.
BARMPlus
commented
3 years ago vite.config.js
resolve: {
alias: [
{
find: 'antd/lib',
replacement: 'antd/es',
},
{
find: '@antv/x6',
replacement: '@antv/x6/dist/x6.js',
},
]
}Adding such a configuration solves this problem locally
losetime
commented
2 years ago thank you @BARMPlus
If you need to use @antv/x6-vue-shape
resolve: {
alias: [
{
find: '@antv/x6',
replacement: '@antv/x6/lib',
},
{
find: '@antv/x6-vue-shape',
replacement: '@antv/x6-vue-shape/lib',
},
]
}
mmrxia
commented
2 years ago can also downgrade to 2.2.4。
"resolutions": {
"vite": "2.2.4"
},注：
如果遇到编译报错，提示找不到printUrls方法，可以注释掉@builder_vite-service包中的devServer.printUrls();。
prc333
commented
2 years ago thank you @BARMPlus
If you need to use @antv/x6-vue-shape
resolve: { alias: [ { find: '@antv/x6', replacement: '@antv/x6/lib', }, { find: '@antv/x6-vue-shape', replacement: '@antv/x6-vue-shape/lib', }, ] }‘replacement: '@antv/x6/lib' not work, must be 'replacement: '@antv/x6/dist/x6.js'
lulei90
commented
2 years ago thank you @BARMPlus
If you need to use @antv/x6-vue-shape
resolve: { alias: [ { find: '@antv/x6', replacement: '@antv/x6/lib', }, { find: '@antv/x6-vue-shape', replacement: '@antv/x6-vue-shape/lib', }, ] }
The following information is prompted when I use this configuration
Niputi
commented
2 years ago @lulei90 please provide a reproduction for your @antv/x6-vue-shape problem
bluwy
commented
2 years ago I can reproduce the issue with the zip file repro in Vite 2.8.6. But based on https://github.com/vitejs/vite/issues/3413#issuecomment-908867958, it may also be an issue with antv incorrectly publishing their packages. ESM files must be using .mjs extensions.
gavinwyf
commented
2 years ago 2.8.4 not work. vite@2.8.4 esbuild@0.14.23
Noemi-
commented
2 years ago vite.config.js
resolve: { alias: [ { find: 'antd/lib', replacement: 'antd/es', }, { find: '@antv/x6', replacement: '@antv/x6/dist/x6.js', }, ] }Adding such a configuration solves this problem locally
for me, this only work in dev mode. When I run production mode(npm run build, npm run preview) in vite, the registered vue node won't show.
vite@2.7.13 vue@3.2.31 x6@1.30.1 x6-vue-shape@1.3.1
losetime
commented
2 years ago @Noemi- production environment you need to delete this configuration
taomas
commented
2 years ago 请问这个问题现在解决了吗，使用 @antv/x6-vue-shape 后，同样 dev 模式下展示正常，但是vite preview 或者 vite build 时，注册的 vue 节点无法展示。
dev模式下
preview模式下
taomas
commented
2 years ago 找到原因了。
通过 render 方法渲染的 vue 组件，可以正常显示，但是通过 template 渲染的 vue 组件，build 之后不会正常显示。
例子：
// FlowNode.tsx文件
import '@antv/x6-vue-shape';
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',
},
],
}
humbinal
commented
2 years ago 使用render和alias配合彻底解决了这个问题，dev和build后都可用了，建议各位x6项目的大神在x6的vue-shape部分官方文档中说明一下，否则这个问题能把新手搞自闭了，而且这个缺陷修复方案还在vite仓库里~
另外非tsx在vue3中注册的写法实例如下：
import { createVNode } from "vue";
import Count from "./components/Count";
...
// 方式1：注册 vue component
Graph.registerVueComponent(
"count",
{
render: ()=>{
return createVNode(Count);
}
},
true
);
// 方式2：注册 vue component
Graph.registerNode("my-count", {
inherit: "vue-shape",
x: 200,
y: 150,
width: 150,
height: 100,
component: {
render: ()=>{
return createVNode(Count);
}
},
});另外，修改前的完整代码为官方示例： https://codesandbox.io/s/vue-shape-8ciig
xinzi1990
commented
2 years ago 使用render和alias配合彻底解决了这个问题，dev和build后都可用了，建议各位x6项目的大神在x6的vue-shape部分官方文档中说明一下，否则这个问题能把新手搞自闭了，而且这个缺陷修复方案还在vite仓库里~
另外非tsx在vue3中注册的写法实例如下：
import { createVNode } from "vue"; import Count from "./components/Count"; ... // 方式1：注册 vue component Graph.registerVueComponent( "count", { render: ()=>{ return createVNode(Count); } }, true ); // 方式2：注册 vue component Graph.registerNode("my-count", { inherit: "vue-shape", x: 200, y: 150, width: 150, height: 100, component: { render: ()=>{ return createVNode(Count); } }, });另外，修改前的完整代码为官方示例： https://codesandbox.io/s/vue-shape-8ciig
谢谢老哥，我也遇到的同样的问题，打包之后会有报错~用了render之后就好了
xinzi1990
commented
2 years ago 找到原因了。
通过 render 方法渲染的 vue 组件，可以正常显示，但是通过 template 渲染的 vue 组件，build 之后不会正常显示。
例子：
// FlowNode.tsx文件 import '@antv/x6-vue-shape'; 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', }, ], }
我想请教下，为什么template的形式不可以，render的形式可以呢？
Fnxxxxo
commented
2 years ago 找到原因了。 通过 render 方法渲染的 vue 组件，可以正常显示，但是通过 template 渲染的 vue 组件，build 之后不会正常显示。 例子：
// FlowNode.tsx文件 import '@antv/x6-vue-shape'; 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', }, ], }我想请教下，为什么template的形式不可以，render的形式可以呢？
template最终会构建生成render，vue.runtime只认render，直接给template无法渲染。
Fnxxxxo
commented
2 years ago { find: '@antv/x6', replacement: '@antv/x6/dist/x6.js', },
这不是一个好办法。把"@antv/x6"的解析路径改到umd包，摇树就拉了。另外x6的高级功能只能通过“@antv/x6/es/registry/tool/”和“@antv/x6/es/view”引用，改路径导致拼接后解析报错，意味着自定义视图和自定义工具之类的定制修改都用不了。目前还没有找到办法绕过
pengxiaotian
commented
2 years ago 使用 template 需要启用 运行时编译
whitehole-Z
commented
2 years ago 请问怎么启用呢
lulei90
commented
2 years ago 单独使用 @antv/x6时不会报错
搭配使用@antv/x6-vue-shape包时会报此错误 Cannot read property 'ToolItem' of undefined
原因貌似是预构建的问题，不需要使用resolve调整引入包类型，只用单独把@antv/x6-vue-shape排除在预构建配置中就正常了
大家可以参考如下配置：
optimizeDeps: {
exclude: ['@antv/x6-vue-shape'],
},对应vite版本为2.9.13
miniliupeng
commented
2 years ago 我的项目是 react、@antv/x6-react-shape，上述解决办法除了降级2.2.4，都不行，
oyal
commented
2 years ago 单独使用
@antv/x6时不会报错 搭配使用@antv/x6-vue-shape包时会报此错误Cannot read property 'ToolItem' of undefined原因貌似是预构建的问题，不需要使用resolve调整引入包类型，只用单独把@antv/x6-vue-shape排除在预构建配置中就正常了 大家可以参考如下配置：optimizeDeps: { exclude: ['@antv/x6-vue-shape'], },对应vite版本为
2.9.13
我使用这个配置会报错，vite 3.0.0
ReferenceError: exports is not defined
ZHUYUANWEI
commented
2 years ago 在"vite": "^3.0.7"版本中这个配置正常，可以解决
Cannot read property 'ToolItem' of undefined问题
lulei90
commented
2 years ago 单独使用
@antv/x6时不会报错 搭配使用@antv/x6-vue-shape包时会报此错误Cannot read property 'ToolItem' of undefined原因貌似是预构建的问题，不需要使用resolve调整引入包类型，只用单独把@antv/x6-vue-shape排除在预构建配置中就正常了 大家可以参考如下配置：optimizeDeps: { exclude: ['@antv/x6-vue-shape'], },对应vite版本为
2.9.13我使用这个配置会报错，vite 3.0.0
ReferenceError: exports is not defined
修改vite配置前记得先清除.vite目录，否则无法生效
lulei90
commented
2 years ago 我的项目是 react、@antv/x6-react-shape，上述解决办法除了降级2.2.4，都不行，
修改vite配置前，有没先清除.vite目录
roojay520
commented
2 years ago "vite": "^3.0.9" 目前使用 import { Button } from '@antv/x6/es/registry/tool/button.js'; 报错Uncaught TypeError: Cannot read properties of undefined (reading 'ToolItem')
解决方法：
// vite.config.js
optimizeDeps: {
exclude: ['@antv/x6'],
include: ['mousetrap'],
}
// custom-x6-button.js
import { Button } from '@antv/x6/es/registry/tool/button.js';
Button.define({ /*...*/})
695648896
commented
2 years ago
"vite": "^3.0.9"目前使用import { Button } from '@antv/x6/es/registry/tool/button.js';报错Uncaught TypeError: Cannot read properties of undefined (reading 'ToolItem')解决方法：
// vite.config.js optimizeDeps: { exclude: ['@antv/x6'], include: ['mousetrap'], } // custom-x6-button.js import { Button } from '@antv/x6/es/registry/tool/button.js'; Button.define({ /*...*/})
@roojay520 (｡･∀･)ﾉﾞ嗨，打扰了，按照您的配置，报了另一个错 SyntaxError: The requested module '/node_modules/jquery/dist/jquery.js?v=772361b8' does not provide an export named 'default' (at index.ts:1:8)
你是否有遇到过呢，需要您的帮助
695648896
commented
2 years ago https://user-images.githubusercontent.com/30861990/187613535-76c10024-e789-40ae-a422-5c9a4bd7a495.png 将x6内依赖的commonjs依赖给放进include 就可成功运行了
huiliangShen
commented
2 years ago 我的项目是 react、@antv/x6-react-shape，上述解决办法除了降级2.2.4，都不行，
我这边可以了
"vite": "2.9.9"
"react": "18.1.0"
"@antv/x6": "^1.34.1",
"@antv/x6-react-shape": "^1.6.1"现在配置完打包后preview也没问题了，配置如下
// vue.config.ts
optimizeDeps: {
exclude: ['@antv/x6'],
include: ['jquery', 'jquery-mousewheel', 'mousetrap']
}打包后preview会报'Graph'关键字等的错误，可以试着加下
// vue.config.ts
build: {
commonjsOptions: {
ignoreTryCatch: false
}
}
sapphi-red
commented
2 years ago Closing as upgrading Vite to 3.2.0-beta.2+ fixed this. Maybe #10427 fixed this. I guess the root cause is related to https://github.com/evanw/esbuild/issues/2177#issuecomment-1096200814.
kaindy7633
commented
2 years ago @sapphi-red 我在 react 18.2 下，升级 vite 到 3.2.2，确实解决了这个问题
Describe the bug
Throw error
Uncaught TypeError: Cannot read property 'ToolItem' of undefined.And I've found an error in the bundle of @antv/x6 (ToolsView is used before definition):
Reproduction
Please check this demo: vite-x6.zip
Without
src/init.tsx:66andsrc/init.tsx:6, it works as exprected.System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following