react-native-echarts icon indicating copy to clipboard operation
react-native-echarts copied to clipboard

TypeError: Cannot read property 'handler' of undefined

Open 984803909 opened this issue 11 months ago • 8 comments

Describe the bug A clear and concise description of what the bug is. TypeError: Cannot read property 'handler' of undefined To Reproduce Steps to reproduce the behavior:

  1. Go to '...' 加载组件后 图表不显示 然后尝试进行滑动就报错这个

Expected behavior index.tsx // import { SkiaChart, SVGRenderer } from '@wuba/react-native-echarts'; import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts'; import * as echarts from 'echarts/core'; import { useRef, useEffect } from 'react'; import { BarChart, } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, } from 'echarts/components'; import React from 'react';

// 注册扩展组件 echarts.use([ TitleComponent, TooltipComponent, GridComponent, SVGRenderer, // ... BarChart, ])

const E_HEIGHT = 250; const E_WIDTH = 300;

// 初始化 function ChartComponent({ option }:any) { const chartRef = useRef(null);

useEffect(() => { let chart: any; if (chartRef.current) { // @ts-ignore chart = echarts.init(chartRef.current, 'light', { renderer: 'svg', width: E_WIDTH, height: E_HEIGHT, }); chart.setOption(option); } return () => chart?.dispose(); }, [option]);

// 选择你偏爱的图表组件 //return <SkiaChart ref={chartRef} />; return <SvgChart ref={chartRef} />; }

// 组件使用 export default function PriceEcharts() { const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', }, ], } return <ChartComponent option={option} /> } package.josn "dependencies": { "@expo/vector-icons": "^14.0.2", "@gorhom/bottom-sheet": "^5.0.6", "@react-native-community/datetimepicker": "8.2.0", "@react-native-picker/picker": "2.9.0", "@react-navigation/bottom-tabs": "^7.0.0", "@react-navigation/native": "^7.0.0", "@shopify/react-native-skia": "1.5.0", "@wuba/react-native-echarts": "^2.0.2", "echarts": "^5.5.1", "expo": "~52.0.20", "expo-blur": "~14.0.1", "expo-constants": "~17.0.3", "expo-font": "~13.0.2", "expo-haptics": "~14.0.0", "expo-linear-gradient": "~14.0.1", "expo-linking": "~7.0.3", "expo-router": "~4.0.14", "expo-splash-screen": "~0.29.18", "expo-status-bar": "~2.0.0", "expo-symbols": "~0.2.0", "expo-system-ui": "~4.0.6", "expo-web-browser": "~14.0.1", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.5", "react-native-gesture-handler": "~2.20.2", "react-native-modal-datetime-picker": "^18.0.0", "react-native-picker-select": "^9.3.1", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-svg": "15.8.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5", "zrender": "^5.5.0" },

Screenshots expo模拟器 Additional context Add any other context about the problem here.

984803909 avatar Dec 25 '24 13:12 984803909

我也遇到这个问题了,之前还好好的,请问解决了吗?

twe1227 avatar Jan 02 '25 08:01 twe1227

我也遇到这个问题了,之前还好好的,请问解决了吗?

无 没好

984803909 avatar Jan 07 '25 13:01 984803909

提供个完整的可复现仓库

zhiqingchen avatar Jan 08 '25 06:01 zhiqingchen

I encountered a similar issue with expo^52.0.23, but this problem disappeared after I upgraded to expo^52.0.24.

Nihta avatar Jan 10 '25 02:01 Nihta

Is it a new architecture specific issue?

Clarkkkk avatar Mar 21 '25 08:03 Clarkkkk

我的友盟可以捕获到这个错误,但是无法定位具体是怎么触发的 Application threw exception RCTFatalException: Unhandled JS Exception: TypeError: Cannot read property 'handler' of undefined, js engine: hermes: Unhandled JS Exception: TypeError: Cannot read property 'handler' of undefined, js engine: hermes, stack:2 jintanapp 0x000000010247ebb0 0x102080000 + 4189104

TomWq avatar Apr 08 '25 03:04 TomWq

Any news? I faced that issue

drminh2807 avatar Sep 18 '25 09:09 drminh2807

Fix:npm install [email protected] deduped the version across the package dependencies and fixed the rendering for me

More details:

I had two different versions of zrender installed:

The module resolution was inconsistent, causing the import to fail

You can validate if this is case for you by running npm list zrender

The Fix: By installing [email protected] as a direct dependency, npm now properly deduplicates and uses a consistent version across all packages that depend on zrender.

Result: The import { getInstance } from 'zrender/lib/zrender'; statement now works correctly because all packages are using the same compatible version of zrender.

The code is no longer breaking because:

All zrender references now point to the same compatible version (5.4.4) The getInstance function exists and is properly exported from zrender/lib/zrender

oreHGA avatar Oct 19 '25 05:10 oreHGA