Uncaught TypeError: Cannot read property 'ToolItem' of undefined #3413
Comments
|
vite 2.2.4 is ok. 😂 |
|
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. |
Shinigami92
added
bug
p3-minor-bug
|
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. |
|
vite 2.3.7 not work |
|
@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) |
|
@Ronbb were you successfull working around that problem? |
|
@mdugue not yet, sorry |
|
I met the same problem, the version of vite 2.4.1 |
I can't solve this same problem when I use vite 2.2.4 |
Check the version of yarn why esbuild |
|
有解决的方案了吗？各位大佬 |
目前只能降级到2.2.4 Only downgrade to 2.2.4 |
|
It seems a bug from From evanw/esbuild#1488 |
|
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 |
|
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',
},
]
} |
|
can also downgrade to 2.2.4。 "resolutions": {
"vite": "2.2.4"
},注： |
|
2.8.4 not work. |
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.
|
|
@Noemi- production environment you need to delete this configuration |
|
请问这个问题现在解决了吗，使用 @antv/x6-vue-shape 后，同样 dev 模式下展示正常，但是vite preview 或者 vite build 时，注册的 vue 节点无法展示。 dev模式下
preview模式下 |
|
找到原因了。 通过 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',
},
],
} |
|
使用render和alias配合彻底解决了这个问题，dev和build后都可用了，建议各位x6项目的大神在x6的vue-shape部分官方文档中说明一下，否则这个问题能把新手搞自闭了，而且这个缺陷修复方案还在vite仓库里~ 另外非tsx在vue3中注册的写法实例如下： 另外，修改前的完整代码为官方示例： https://codesandbox.io/s/vue-shape-8ciig |
谢谢老哥，我也遇到的同样的问题，打包之后会有报错~用了render之后就好了 |
我想请教下，为什么template的形式不可以，render的形式可以呢？ |
template最终会构建生成render，vue.runtime只认render，直接给template无法渲染。 |
这不是一个好办法。把"@antv/x6"的解析路径改到umd包，摇树就拉了。另外x6的高级功能只能通过“@antv/x6/es/registry/tool/”和“@antv/x6/es/view”引用，改路径导致拼接后解析报错，意味着自定义视图和自定义工具之类的定制修改都用不了。目前还没有找到办法绕过 |
|
使用 template 需要启用 运行时编译 |
|
请问怎么启用呢 |
|
单独使用 optimizeDeps: {
exclude: ['@antv/x6-vue-shape'],
},对应vite版本为 |
|
我的项目是 react、@antv/x6-react-shape，上述解决办法除了降级2.2.4，都不行， |
我使用这个配置会报错，vite 3.0.0 |
|
在"vite": "^3.0.7"版本中这个配置正常，可以解决
|
修改vite配置前记得先清除 |
修改vite配置前，有没先清除 |
|
解决方法： // 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 (｡･∀･)ﾉﾞ嗨，打扰了，按照您的配置，报了另一个错 你是否有遇到过呢，需要您的帮助 |
|
https://user-images.githubusercontent.com/30861990/187613535-76c10024-e789-40ae-a422-5c9a4bd7a495.png |
我这边可以了 "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
}
} |
|
Closing as upgrading Vite to 3.2.0-beta.2+ fixed this. Maybe #10427 fixed this. |
|
@sapphi-red 我在 react 18.2 下，升级 vite 到 3.2.2，确实解决了这个问题 |
and others
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:System: OS: Windows 10 10.0.19042 CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz Memory: 4.25 GB / 15.80 GB Binaries: Node: 14.12.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.5.2 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 90.0.4430.212 Edge: Spartan (44.19041.423.0), Chromium (90.0.818.56) Internet Explorer: 11.0.19041.1 npmPackages: vite: ^2.3.2 => 2.3.2Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following
The text was updated successfully, but these errors were encountered: