antvis / antvis/G6

[Bug]: Uncaught TypeError: object.dirty is not a function on Vue 3

Open
#7,322 5 comments 0 reactions 0 assignees View on GitHub
question 💬
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

I'm using G6 for creating graphs on a Vue 3 application. Up to two weeks ago, everything was fine. However, since then, every time I include G6 on my code the graph does not display and the TypeError in the title is thrown. This happens also for the graphs presented on the playground. For example:
```

import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/combo.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
data,
layout: {
type: 'combo-combined',
comboPadding: 2,
},
node: {
style: {
size: 20,
labelText: (d) => d.id,
},
palette: {
type: 'group',
field: (d) => d.combo,
},
},
edge: {
style: (model) => {
const { size, color } = model.data;
return {
stroke: color || '#99ADD1',
lineWidth: size || 1,
};
},
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
autoFit: 'view',
});

graph.render();
});

```
does not work

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

- Copy the code provided in a Vue file and run in any browser

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [x] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by running the supplied Vue file and G6 example in Chrome or Edge, then inspect the failure around Graph construction and graph.render(). Compare the behavior with the reported TypeError; done means the graph displays in the Vue 3 application and the error no longer occurs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.