hustcc / hustcc/echarts-for-react

TypeError: Cannot read properties of undefined (reading 'disconnect')

Open
#522 8 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
5k
Forks
650
PR merge metrics
No merged PRs in 30d

Description

# What?
Hi, we're using this package and when we unmount the component that is using it we get this warning. Looks related with `size-sensor` not having `ResizeObserver` defined when unmounting.

This is how we're using it
``` javascript
import { useMemo } from 'react'
import * as echarts from 'echarts/core'
import cn from 'classnames'
import EChart from 'echarts-for-react/esm/core.js'
import { CanvasRenderer } from 'echarts/renderers'

// Themes
import peaceTheme from 'ds/atoms/Chart/themes/peace'
import pastelTheme from 'ds/atoms/Chart/themes/pastel'

import { ChartTheme } from 'stores/chartLayers/layerTypes'

const THEMES: Record = {
pastel: pastelTheme,
peace: peaceTheme,
}

// Core components
import {
GridComponent,
TooltipComponent,
TitleComponent,
LegendComponent,
DatasetComponent,
TransformComponent,
DataZoomComponent,
AriaComponent,
} from 'echarts/components'

import {
LineChart,
BarChart,
ScatterChart,
PieChart,
FunnelChart,
GaugeChart,
} from 'echarts/charts'

import type { ECBasicOption } from 'echarts/types/dist/shared'
import { Opts } from 'echarts-for-react/esm/types'

echarts.use([
// Charts
LineChart,
BarChart,
PieChart,
FunnelChart,
ScatterChart,
GaugeChart,

// Core components
AriaComponent,
TitleComponent,
LegendComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
DataZoomComponent,

// Canvas by default
CanvasRenderer,
])

// Register themes
Object.keys(THEMES).forEach((themeKey) => {
echarts.registerTheme(themeKey, THEMES[themeKey])
})

export type ZoomEvent = {
start: number
end: number
startValue?: number
endValue?: number
}
const PADDING = 32
type Props = {
option: ECBasicOption
theme: ChartTheme
width: number
height: number
isComputing?: boolean
onZoom?: (args: ZoomEvent) => void
locale?: string
}
const Chart = ({
option,
width,
height,
isComputing = false,
theme,
onZoom,
locale = 'en',
}: Props) => {
const onEvents = useMemo(
() => ({
datazoom: (args: ZoomEvent) => onZoom?.(args),
}),
[onZoom]
)
const opts = useMemo(
() => ({
renderer: 'canvas',
locale,
width: width - PADDING,
height: height - PADDING,
}),
[width, height, locale]
)
return (




)
}

export default Chart
```

## The Error/Warning
![image](https://user-images.githubusercontent.com/49499/205586383-f3bb9f50-2c64-4238-b219-07fb7da05901.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.