1. Feedback
  2. React
  3. 9901

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

4
Votes

How to solve 'Uncaught TypeError: Cannot use 'in' operator to search for '__eventList' in undefined' error

I have to add charts in a React (typescript) project, but if I insert it in a condition {boolean && <ChartComponent>… like this:

(the UI is from antd library)


let dataChart: object | DataManager | undefined = [

            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },

            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },

            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },

            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },

            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },

            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }

        ];



return <Card …..>
  <Spin …>

  {dataChart && this.state.settings!.type == 'Bar Vertical' &&
        

   <
ChartComponent
 

                 primaryXAxis={{ valueType: 'Category' }}
                

primaryYAxis={{ labelFormat: '${value}K' }} >

                 <
Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
                 <

SeriesCollectionDirective>

                           

<SeriesDirective dataSource={dataChart} xName='month' yName='sales' type='Column' />

                 </

SeriesCollectionDirective>
     </

ChartComponent>

   }

  </Spin>


</Card>




I get this error:

Uncaught TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.addOrGetEventData (event-handler.js:27)

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.remove (event-handler.js:75)

    at ChartComponent.push../node_modules/@syncfusion/ej2-charts/src/chart/chart.js.Chart.unWireEvents (chart.js:961)

    at ChartComponent.push../node_modules/@syncfusion/ej2-charts/src/chart/chart.js.Chart.destroy (chart.js:914)

    at ChartComponent.push../node_modules/@syncfusion/ej2-react-base/src/component-base.js.ComponentBase.componentWillUnmount (component-base.js:212)

    at callComponentWillUnmountWithTimer (react-dom.development.js:21863)

    at HTMLUnknownElement.callCallback (react-dom.development.js:336)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

    at invokeGuardedCallback (react-dom.development.js:440)

    at safelyCallComponentWillUnmount (react-dom.development.js:21870)

    at commitUnmount (react-dom.development.js:22359)

    at unmountHostComponents (react-dom.development.js:22827)

    at commitDeletion (react-dom.development.js:22863)

    at commitMutationEffects (react-dom.development.js:25281)

    at HTMLUnknownElement.callCallback (react-dom.development.js:336)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

    at invokeGuardedCallback (react-dom.development.js:440)

    at commitRootImpl (react-dom.development.js:25008)

    at unstable_runWithPriority (scheduler.development.js:818)

    at runWithPriority$2 (react-dom.development.js:12130)

    at commitRoot (react-dom.development.js:24889)

    at finishSyncRender (react-dom.development.js:24296)

    at performSyncWorkOnRoot (react-dom.development.js:24274)

    at react-dom.development.js:12180

    at unstable_runWithPriority (scheduler.development.js:818)

    at runWithPriority$2 (react-dom.development.js:12130)

    at flushSyncCallbackQueueImpl (react-dom.development.js:12175)

    at flushSyncCallbackQueue (react-dom.development.js:12163)

    at scheduleUpdateOnFiber (react-dom.development.js:23676)

    at Object.enqueueSetState (react-dom.development.js:13975)

    at DashboardView.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)

    at dashboard-detail.tsx:78


The above error occurred in the component:

    in ChartComponent (created by ChartView)

    in div (created by Context.Consumer)

    in div (created by Context.Consumer)

    in Spin (created by ChartView)

    in div (created by Context.Consumer)

    in div (created by Context.Consumer)

    in Card (created by ChartView)

    in ChartView (created by DashboardView)

    in div (created by Context.Consumer)

    in Col (created by DashboardView)

    in div (created by Context.Consumer)

    in Row (created by DashboardView)

    in div (created by DashboardView)

    in div (created by Context.Consumer)

    in div (created by Context.Consumer)

    in Spin (created by DashboardView)

    in main (created by Basic)

    in Basic (created by Context.Consumer)

    in Adapter (created by DashboardView)

    in section (created by BasicLayout)

    in BasicLayout (created by Context.Consumer)

    in Adapter (created by DashboardView)

    in DashboardView (created by Connect(DashboardView))

    in Connect(DashboardView) (created by Form(Connect(DashboardView)))

    in Form(Connect(DashboardView)) (created by withI18nextTranslation(Form(Connect(DashboardView))))

    in withI18nextTranslation(Form(Connect(DashboardView))) (created by Context.Consumer)

    in withRouter(withI18nextTranslation(Form(Connect(DashboardView)))) (created by Context.Consumer)

    in Route (created by App)

    in section (created by BasicLayout)

    in BasicLayout (created by Context.Consumer)

    in Adapter (created by App)

    in App (created by Context.Consumer)

    in withRouter(App) (created by Context.Consumer)

    in ComponentBoundWithAppContext

    in Provider

    in Router (created by BrowserRouter)

    in BrowserRouter


But if I use it like this i don't get any error:


let dataChart: object | DataManager | undefined = [
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ]; 

return <Card …..>
  <Spin …>
       
<
ChartComponent
 
                 primaryXAxis={{ valueType: 'Category' }}
                 
primaryYAxis={{ labelFormat: '${value}K' }} >
                 <
Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
                 <
SeriesCollectionDirective>
                            
<SeriesDirective dataSource={dataChart} xName='month' yName='sales' type='Column' />
                 </
SeriesCollectionDirective>
       </
ChartComponent>

  </Spin>
</Card>

How can I solve this? I need to use conditions because I have to show a type of chart or other depending on the selected chart type

P.S. this is a compontent, it is called inside a Grid (Row, Col from antd)