antvis / antvis/G

react严格模式下webglRender初始化时会报错

Open
#2,076 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
1.2k
Forks
230
PR merge metrics
No merged PRs in 30d

Description

- OS: macOS 15.6.1 (24G90)
- Browser chrome
- Version @antv/g@6.1.28 、@antv/g-webgl@2.0.52

## Steps To Reproduce
1. 初始化一个画布
2. 创建一个圆
3. 把圆添加进画布

```ts
import { Canvas, CanvasEvent, Circle } from "@antv/g";
import { Renderer } from "@antv/g-webgl";
import { useEffect, useRef } from "react";

export function Test() {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
const renderer = new Renderer();
const canvas = new Canvas({
container: ref.current,
width: 600,
height: 500,
renderer,
});
const circle = new Circle({
style: {
r: 50,
fill: "#1890FF",
stroke: "#F04864",
lineWidth: 4,
cursor: "pointer",
},
});

const fn = () => {
canvas.appendChild(circle);
};
canvas.addEventListener(CanvasEvent.READY, fn);
return () => {
canvas.removeEventListener(CanvasEvent.READY, fn);
canvas.destroy();
};
}, []);

return

;
}

```
如果关闭react的严格模式不会报错,打开会报错,
报错信息如下:
Error handled by React Router default ErrorBoundary: TypeError: Cannot read properties of undefined (reading 'destroy')
at RenderGraphPlugin.ts:277:19
at SyncHook.ts:15:16
at Array.forEach ()
at SyncHook2.call (SyncHook.ts:13:20)
at RenderingService2.destroy (RenderingService.ts:332:24)
at Canvas2.destroy (Canvas.ts:387:32)
at cleanExistedCanvas (canvas.ts:18:52)
at new Canvas2 (Canvas.ts:198:7)
at index.tsx?t=1761104888817:12:24
at Object.react_stack_bottom_frame (react-dom-client.development.js:25989:20)

Contributor guide

Open the contributing guide

Research direction

Reproduce the example with React Strict Mode, then trace the cleanup path from canvas.ts and Canvas.ts through RenderingService.ts to RenderGraphPlugin.ts around line 277. Compare the initialization and destruction sequence across the repeated effect lifecycle. Done means the example no longer throws during strict-mode initialization or cleanup, while the non-strict behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.