Cannot read property 'trigger' of null

[TomWq]

我在使用过程中多点几次就会出现这个错误: Cannot read property 'trigger' of null "react-native":" 0.72.3" "echarts": "^5.4.3", "@wuba/react-native-echarts": "^1.2.2"

[zhiqingchen]

有相应demo吗

[hzlgit]

我也是，重进几次就出现了，安卓的，配置

    const COLORS = [Theme.baseColor, '#5470c6'];
    const options: EChartsOption = {
      backgroundColor: 'white',
      title: {
        text: '速度：km/h',
        textStyle: {
          fontSize: 12,
        },
        left: 10,
        top: 5,
      },
      grid: {
        show: true,
        left: '30',
        top: '40',
        right: '30',
        bottom: '40',
        borderColor: '#eee',
      },
      color: COLORS,
      legend: {
        show: false,
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        triggerEvent: false,
        splitLine: {
          show: false,
          lineStyle: {
            color: '#eee',
            width: 1,
          },
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: '#ccc',
            width: 1,
          },
        },
        axisTick: {
          show: false, //去小头头
          length: 5, //坐标轴刻度的长度
          alignWithLabel: true,
          inside: true,
        },
        data: data.xData,
        axisLabel: {
          color: '#999',
          fontSize: 10,
          fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
          // showMinLabel: true,
          // showMaxLabel: true,
          formatter(value) {
            return `${value}`;
          },
        },
      },
      dataZoom: [
        {
          type: 'slider', //隐藏或显示（true）组件
          show: true,
          backgroundColor: '#c9c9c9', // 组件的背景颜色。
          fillerColor: Theme.baseColor, // 选中范围的填充颜色。
          borderColor: '#f8f8f8', // 边框颜色
          showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
          start: 0,
          end: 100,
          maxSpan: 20,
          borderRadius: 5,
          filterMode: 'empty',
          width: '50%', //滚动条高度
          height: 8, //滚动条显示位置
          left: 'center',
          handleSize: 0, //控制手柄的尺寸
          bottom: 10, // dataZoom-slider组件离容器下侧的距离
        },
        {
          //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
          type: 'inside',
          zoomOnMouseWheel: true, //滚轮是否触发缩放
          moveOnMouseMove: true, //鼠标滚轮触发滚动
          moveOnMouseWheel: true,
        },
      ],
      yAxis: {
        max: 150,
        min: 0,
        type: 'value',
        splitNumber: 4,
        axisLabel: {
          color: '#666',
          fontSize: 10,
          fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
          formatter: function (val: any) {
            return `${numeral(val).format('0')}`;
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: {
        symbol: 'circle',
        data: data.data,
        label: {
          show: true,
          color: '#666',
          fontSize: 10,
        },
        type: 'line',
        lineStyle: {
          width: 1,
        },
      },
      animationEasing: 'quadraticIn',
    };
    let chart: any;
    if (chartRef.current) {
      // @ts-ignore
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'svg',
        width,
        height,
      });
      chart.setOption(options);
    }
    return () => chart?.dispose();
  }, [data, width, height]);

[hzlgit]

好像是因为增加了dataZoom的缘故，其它没加的倒是没触发过这个错误

[zhiqingchen]

重进几次就出现了，指的是使用 react navigation 跳转页面吗

[wogno]

I have the same problem that work on ios and raise this error on android. That was working on react native 0.71.2 but I when I move on react native 0.72.3 I got error

[zhiqingchen]

try 1.2.3-alpha.0

[wogno]

@zhiqingchen The issue is still there on android but not on ios

[iambool]

Any other demos? I don't get errors in the above case

[aleksey-mukho]

I reproduced on iOS

[zhiqingchen]

How

[pavelbabenko]

Same issue on iOS

[wogno]

Hi, someone has found a solution?

[zhiqingchen]

Can anyone provide a reproducible demo of this

[hazirmagron]

Any solution? I have started to receive this error message as well. I might add that I didn't experience these issues before - it's new and nothing seems to fix it.

Dependencies:

• "@wuba/react-native-echarts": "^1.2.3"
• "@shopify/react-native-skia": "0.1.196"
• "echarts": "^5.4.3"
• "expo": "^49.0.0"
• "react-native": "0.72.3"

[hazirmagron]

Do you have a suggestion of what might cause this? The bug is app breaking and I'm suspecting it has to do with version incompatibility since I never experienced it in the past using very similar code. It also happens seemingly randomly @zhiqingchen

[zhiqingchen]

I haven't been able to reproduce this

[zhiqingchen]

try 1.1.2

[hazirmagron]

try 1.1.2

Tried - issue remains unfortunately

Edit: Below is my Echarts component for reference.

import SkiaChart, { SVGRenderer } from "@wuba/react-native-echarts/skiaChart"
import React, { memo, useEffect, useRef } from "react"
import { BarChart, LineChart, PieChart } from "echarts/charts"
import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components"
import * as echarts from "echarts/core"
import { EChartsOption } from "echarts/types/dist/shared"

echarts.use([TooltipComponent, LegendComponent, GridComponent, SVGRenderer, BarChart, LineChart, PieChart])

export const Echarts = memo(({ option, width, height }: { option: EChartsOption; width: number; height: number }) => {
    const skiaRef = useRef<any>(null)

    useEffect(() => {
        let chart: echarts.ECharts
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, "light", {
                renderer: "svg",
                width,
                height,
            })

            chart.setOption(option)
        }
        return () => chart?.dispose()
    }, [option, width, height])

    return <SkiaChart ref={skiaRef} />
})

[zhiqingchen]

If someone can reproduce the issue, can provide a expo snack so that we can easily locate and fix it.

https://snack.expo.dev/

[wogno]

I fixed this issue with a temporary config in node_modules, after many tests I saw this error just appeared when the user clicks on any time of my picker calendar, to filter dates, when action is too quick this error appears, but when is slower error did not appear.

So, I did use not the recommendation method to fix the issue but checked if the element existed before the call method.

Step 1, go on zrender on your node_modules and go on zrender.js on lib

all call method should predifined by method && method(), exemple this.animation.start() become this.animation && this.animation.start()

This correction is based on @yechunxi

My files new zrender js file

[wogno]

/*!

• ZRender, a high performance 2d drawing library.
• Copyright (c) 2013, Baidu Inc.
• All rights reserved.
• LICENSE
• https://github.com/ecomfe/zrender/blob/master/LICENSE.txt / import env from './core/env.js'; import as zrUtil from './core/util.js'; import Handler from './Handler.js'; import Storage from './Storage.js'; import Animation, { getTime } from './animation/Animation.js'; import HandlerProxy from './dom/HandlerProxy.js'; import { lum } from './tool/color.js'; import { DARK_MODE_THRESHOLD } from './config.js'; import Group from './graphic/Group.js'; var painterCtors = {}; var instances = {}; function delInstance(id) { delete instances[id]; } function isDarkMode(backgroundColor) { if (!backgroundColor) { return false; } if (typeof backgroundColor === 'string') { return lum(backgroundColor, 1) < DARK_MODE_THRESHOLD; } else if (backgroundColor.colorStops) { var colorStops = backgroundColor.colorStops; var totalLum = 0; var len = colorStops.length; for (var i = 0; i < len; i++) { totalLum += lum(colorStops[i].color, 1); } totalLum /= len; return totalLum < DARK_MODE_THRESHOLD; } return false; } var ZRender = (function () { function ZRender(id, dom, opts) { var _this = this; this._sleepAfterStill = 10; this._stillFrameAccum = 0; this._needsRefresh = true; this._needsRefreshHover = true; this._darkMode = false; opts = opts || {}; this.dom = dom; this.id = id; var storage = new Storage(); var rendererType = opts.renderer || 'canvas'; if (!painterCtors[rendererType]) { rendererType = zrUtil.keys(painterCtors)[0]; } if (process.env.NODE_ENV !== 'production') { if (!painterCtors[rendererType]) { throw new Error("Renderer '" + rendererType + "' is not imported. Please import it first."); } } opts.useDirtyRect = opts.useDirtyRect == null ? false : opts.useDirtyRect; var painter = new painterCtors[rendererType](dom, storage, opts, id); var ssrMode = opts.ssr || painter.ssrOnly; this.storage = storage; this.painter = painter; var handerProxy = (!env.node && !env.worker && !ssrMode) ? new HandlerProxy(painter.getViewportRoot(), painter.root) : null; var useCoarsePointer = opts.useCoarsePointer; var usePointerSize = (useCoarsePointer == null || useCoarsePointer === 'auto') ? env.touchEventsSupported : !!useCoarsePointer; var defaultPointerSize = 44; var pointerSize; if (usePointerSize) { pointerSize = zrUtil.retrieve2(opts.pointerSize, defaultPointerSize); } this.handler = new Handler(storage, painter, handerProxy, painter.root, pointerSize); this.animation = new Animation({ stage: { update: ssrMode ? null : function () { return _this._flush(true); } } }); if (!ssrMode) { this.animation.start(); } } ZRender.prototype.add = function (el) { if (!el) { return; } this.storage && this.storage.addRoot(el); el.addSelfToZr(this); this.refresh(); }; ZRender.prototype.remove = function (el) { if (!el) { return; } this.storage && this.storage.delRoot(el); el.removeSelfFromZr(this); this.refresh(); }; ZRender.prototype.configLayer = function (zLevel, config) { if (this.painter.configLayer) { this.painter.configLayer(zLevel, config); } this.refresh(); }; ZRender.prototype.setBackgroundColor = function (backgroundColor) { if (this.painter.setBackgroundColor) { this.painter.setBackgroundColor(backgroundColor); } this.refresh(); this._backgroundColor = backgroundColor; this._darkMode = isDarkMode(backgroundColor); }; ZRender.prototype.getBackgroundColor = function () { return this._backgroundColor; }; ZRender.prototype.setDarkMode = function (darkMode) { this._darkMode = darkMode; }; ZRender.prototype.isDarkMode = function () { return this._darkMode; }; ZRender.prototype.refreshImmediately = function (fromInside) { if (!fromInside) { this.animation && this.animation.update(true); } this._needsRefresh = false; this.painter.refresh(); this._needsRefresh = false; }; ZRender.prototype.refresh = function () { this._needsRefresh = true; this.animation && this.animation.start(); }; ZRender.prototype.flush = function () { this._flush(false); }; ZRender.prototype._flush = function (fromInside) { var triggerRendered; var start = getTime(); if (this._needsRefresh) { triggerRendered = true; this.refreshImmediately(fromInside); } if (this._needsRefreshHover) { triggerRendered = true; this.refreshHoverImmediately(); } var end = getTime(); if (triggerRendered) { this._stillFrameAccum = 0; this.trigger('rendered', { elapsedTime: end - start }); } else if (this._sleepAfterStill > 0) { this._stillFrameAccum++; if (this._stillFrameAccum > this._sleepAfterStill) { this.animation && this.animation.stop(); } } }; ZRender.prototype.setSleepAfterStill = function (stillFramesCount) { this._sleepAfterStill = stillFramesCount; }; ZRender.prototype.wakeUp = function () { this.animation && this.animation.start(); this._stillFrameAccum = 0; }; ZRender.prototype.refreshHover = function () { this._needsRefreshHover = true; }; ZRender.prototype.refreshHoverImmediately = function () { this._needsRefreshHover = false; if (this.painter.refreshHover && this.painter.getType() === 'canvas') { this.painter.refreshHover(); } }; ZRender.prototype.resize = function (opts) { opts = opts || {}; this.painter.resize(opts.width, opts.height); this.handler.resize(); }; ZRender.prototype.clearAnimation = function () { this.animation && this.animation.clear(); }; ZRender.prototype.getWidth = function () { return this.painter.getWidth(); }; ZRender.prototype.getHeight = function () { return this.painter.getHeight(); }; ZRender.prototype.setCursorStyle = function (cursorStyle) { this.handler.setCursorStyle(cursorStyle); }; ZRender.prototype.findHover = function (x, y) { return this.handler.findHover(x, y); }; ZRender.prototype.on = function (eventName, eventHandler, context) { this.handler.on(eventName, eventHandler, context); return this; }; ZRender.prototype.off = function (eventName, eventHandler) { this.handler.off(eventName, eventHandler); }; ZRender.prototype.trigger = function (eventName, event) { this?.handler?.trigger(eventName, event); }; ZRender.prototype.clear = function () { var roots = this.storage.getRoots(); for (var i = 0; i < roots.length; i++) { if (roots[i] instanceof Group) { roots[i].removeSelfFromZr(this); } } this.storage.delAllRoots(); this.painter.clear(); }; ZRender.prototype.dispose = function () { this.animation && this.animation.stop(); this.clear(); this.storage && this.storage.dispose(); this.painter && this.painter.dispose(); this.handler && this.handler.dispose(); this.animation = this.storage = this.painter = this.handler = null; delInstance(this.id); }; return ZRender; }()); export function init(dom, opts) { var zr = new ZRender(zrUtil.guid(), dom, opts); instances[zr.id] = zr; return zr; } export function dispose(zr) { zr.dispose(); } export function disposeAll() { for (var key in instances) { if (instances.hasOwnProperty(key)) { instances[key].dispose(); } } instances = {}; } export function getInstance(id) { return instances[id]; } export function registerPainter(name, Ctor) { painterCtors[name] = Ctor; } export var version = '5.4.4'; ;

[lucaswitch]

Having this error on Android 12.

[lucaswitch]

It's happening in this line when the chart updates 3,4 times in a small space of time.

[yechunxi]

I reproduce the issue, The reason for this problem is that after the chart executes dispose, some instances are set to null, but some internal asynchronous operations will be called again, resulting in an error.

The current temporary solution is to apply a patch to zrender.js , Modify the method in zrender and add judgment before calling the method. same as @wogno

I gave zrender a PR, but it has not been officially verified and merged. If anyone has a better solution, welcome to submit a PR.

[krmao]

same issue after slowly click legend on android, but ios is ok

 ERROR  TypeError: Cannot read property 'trigger' of null, js engine: hermes

@yechunxi is right, comment // return () => chart?.dispose(); will work success but got warning ' WARN [ECharts] There is a chart instance already initialized on the dom. '

---

example code at https://wuba.github.io/react-native-echarts/docs/getting-started/write-a-simple-line-chart shows

return () => chart?.dispose();

remove this line and add check if exists looks good even if multi charts shows on same page

      const innerChartRef = useRef<any>(null);
      const chartInstance = useRef<any>(null);
      useEffect(() => {
        if (innerChartRef.current) {
          // https://github.com/wuba/react-native-echarts/issues/92
          // WARN [ECharts] There is a chart instance already initialized on the dom. []
          if (!chartInstance.current) {
            chartInstance.current = echarts.init(innerChartRef.current, 'light', {
              renderer: 'svg',
              width,
              height,
            });
            onChartHandler?.(chartInstance.current);
          }

          chartInstance.current.setOption(option);
        }
        // return () => chartInstance.current?.dispose();
      }, [onChartHandler, option, width, height]);

      useImperativeHandle(ref, () => ({ ...innerChartRef.current }));

      return <SvgChart ref={innerChartRef} />;

[alecsloan]

It looks like removing return () => chart?.dispose() fixed this issue for me. Removing this also gave my charts a bit better performance it seems.

@krmao You could probably fix that warning by trying to get the chart instance by ref, this is what I have:

      chart = echarts.getInstanceByDom(chartRef.current) || echarts.init(chartRef.current,'light', {
        height: height,
        width: width,
        renderer: 'svg',
      });

[krmao]

It looks like removing return () => chart?.dispose() fixed this issue for me. Removing this also gave my charts a bit better performance it seems.

@krmao You could probably fix that warning by trying to get the chart instance by ref, this is what I have:

      chart = echarts.getInstanceByDom(chartRef.current) || echarts.init(chartRef.current,'light', {
        height: height,
        width: width,
        renderer: 'svg',
      });

yes, my final code is here, for some echarts dispose manually @alecsloan

    if (!chartInstance.current || chartInstance.current.isDisposed()) {
            chartInstance.current = echarts.init(innerChartRef.current, 'light', {
              renderer: 'svg',
              width,
              height,
            });
      }

[wogno]

Zrender is too slow, to fix bugs, can we change the render library?

[zhiqingchen]

Not yet, zrender is a rendering library for echarts, so if you need a quick fix, patch it in your own project.

[renishdeveloper]

How to change the zrender with any other alternative ? anyone have any idea than let me know. I also have to change as I'm experiencing slow rendering of chart in my react native application.

[zhiqingchen]

zrender 5.5.0 echarts 5.5.0-rc.1

The new version fixes this problem, you can try it.