hustcc / hustcc/echarts-for-react
TypeError: Cannot read properties of undefined (reading 'disconnect')
- 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

Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.