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

[andresgutgon]

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

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<ChartTheme, unknown> = {
  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<Opts>(
    () => ({
      renderer: 'canvas',
      locale,
      width: width - PADDING,
      height: height - PADDING,
    }),
    [width, height, locale]
  )
  return (
    <div className={cn('p-4', { 'animate-pulse': isComputing })}>
      <EChart
        echarts={echarts}
        notMerge
        lazyUpdate // Useful when setOption frequently.
        theme={theme}
        option={option}
        onEvents={onEvents}
        opts={opts}
      />
    </div>
  )
}

export default Chart

The Error/Warning

[andresgutgon]

As a second question I saw now in master is possible to avoid using autoResize https://github.com/hustcc/echarts-for-react/blob/master/src/core.tsx#L155

Do you have an estimate when a new version with this change will be published?

[andresgutgon]

Sorry for the noise. I just found the issue 😂

I was passing width and height to opts and that was making the chart to be disposed each time I resize the chart.

So instead of this

<EChart opts={{ width, height }} />

I do this now:

<EChart style={{ width, height }} />

Again sorry for the noise

[andresgutgon]

It's me again sorry. I though I fixed the issue with that change but continue watching the Error/warning

Now the warning does not occur on each resize but keep happening when unmounting the component