Container component mouse events / tooltip stopped working after upgrading react 18 -> 19

[heinibee1]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37.3.6

Code Sandbox link

https://codesandbox.io/p/sandbox/victory-starter-forked-zfh44g?file=%2Fsrc%2FChart.tsx%3A7%2C18

Bug report

Before I was able to drag the chart and tooltip would pop out when nearing the scatter. Also scatters would grow in size when they because "active". After Upgrading to react 19, it seems like all the "pointer" events for the chart stopped working: not able to drag, not seeing the tooltip, scatters wont grow or react to hovering. 
Also the Scatter and Line components started to gave warnings with this typescript version:

'VictoryLine' cannot be used as a JSX component.
  Its instance type '{ state: {}; getEventState: (eventKey: string | number, namespace: string, childType?: string | undefined) => any; getScopedEvents: (events: any, namespace: any, childType: any, baseProps: any) => {}; ... 43 more ...; events: unknown; }' is not a valid JSX element.
    Types of property 'componentWillReceiveProps' are incompatible.
      Type '((nextProps: Readonly<EventMixinCommonProps>, nextContext: any) => void) | undefined' is not assignable to type '((nextProps: Readonly<any>) => void) | undefined'.
        Type '(nextProps: Readonly<EventMixinCommonProps>, nextContext: any) => void' is not assignable to type '(nextProps: Readonly<any>) => void'.typescript(2786)

Steps to reproduce

Expected behavior

Tooltip would pop out near scatter hover, scatters would grow on hover, chart is draggable on x dimension.

Actual behavior

None of the expected (previously working) stuff is happening.

Environment

- Device: desktop
- OS: macOS 15
- Node: 22

[agusvazquez]

After upgrading to React 19 I am facing the following crash when using VictoryZoomContainer. If I remove it it works fine.

helper-methods.js:171 Uncaught TypeError: Cannot read properties of undefined (reading 'props')
    at getTitleStyle (helper-methods.js:171:1)
    at getTitleProps (helper-methods.js:186:1)
    at getBaseProps (helper-methods.js:285:1)
    at AddEventsMixin.getBaseProps (victory-legend.js:35:24)
    at iteratee (victory-shared-events.js:113:1)
    at helpers.js:410:1
    at Array.reduce (<anonymous>)
    at traverseChildren (helpers.js:396:1)
    at Module.reduceChildren (helpers.js:420:1)
    at VictorySharedEvents.getBasePropsFromChildren (victory-shared-events.js:118:23)

[NickR49]

After upgrading to React 19 I am facing the following crash when using VictoryZoomContainer. If I remove it it works fine.

helper-methods.js:171 Uncaught TypeError: Cannot read properties of undefined (reading 'props')
    at getTitleStyle (helper-methods.js:171:1)
    at getTitleProps (helper-methods.js:186:1)
    at getBaseProps (helper-methods.js:285:1)
    at AddEventsMixin.getBaseProps (victory-legend.js:35:24)
    at iteratee (victory-shared-events.js:113:1)
    at helpers.js:410:1
    at Array.reduce (<anonymous>)
    at traverseChildren (helpers.js:396:1)
    at Module.reduceChildren (helpers.js:420:1)
    at VictorySharedEvents.getBasePropsFromChildren (victory-shared-events.js:118:23)

I'm not using VictoryZoomContainer but I get a very similar error after upgrading to React 19 when I use VictoryLegend -

TypeError: Cannot read properties of undefined (reading 'props')
    at getTitleStyle (victory.js?v=ed826b9f:23225:41)
    at getTitleProps (victory.js?v=ed826b9f:23240:17)
    at getBaseProps9 (victory.js?v=ed826b9f:23339:22)
    at AddEventsMixin.getBaseProps (victory.js?v=ed826b9f:23417:12)
    at iteratee (victory.js?v=ed826b9f:18797:54)
    at victory.js?v=ed826b9f:3298:24
    at Array.reduce (<anonymous>)
    at traverseChildren (victory.js?v=ed826b9f:3284:23)
    at Object.reduceChildren (victory.js?v=ed826b9f:3308:10)
    at VictorySharedEvents.getBasePropsFromChildren (victory.js?v=ed826b9f:18802:40)

[heinibee1]

In my case, I need both zoom and voronoi in my tooltip so im creating it like this createContainer('zoom', 'voronoi')

[lancegliser]

Seeing the same behavior for React 19 and Victory@37.3.6.

You can bypass the issue by providing VictoryLegend atitleComponent 'custom' component to use:

<VictoryLegend
  titleComponent={<VictoryLabel />}
/>

[andymerskin]

@lancegliser Thanks for sharing this, I would've never thought to try this. I experienced a similar problem on 37.3.6 where one of my <VictoryLine> components with no labelComponent defined (so I assume it should just be using <VictoryLabel /> by default) was throwing a similar undefined error from getLabelPlacement() internally.

The problem is, the stack trace for the error was too long, so I wasn't able to trace back to application code to identify which <VictoryLine> was the culprit. Only through trial and error was I able to identify which one was throwing. 🤦‍♂️

[kevinpvh]

I have the same problem. Is there any solution. By adding props as above the app does not crash anymore. But the tooltip still does not appear.

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.