[BUG]The requested module '/node_modules/.vite/deps/react-tooltip.js?v=d82dfd32' does not provide an export named 'TooltipRefProps'

[izquierdorama]

Bug description I am using the imperative mode example and when importing import { Tooltip, TooltipRefProps } from 'react-tooltip'; The TooltipRefProps is not recognizing me, I was completely guided by that example and the library is not recognizing me

Version of Package Latest

To Reproduce When star page when used the tooltip

Screenshots

Desktop

• OS: Windows
• Browser: all browser
• Frameworks React 18 with vite

[gabrieljablonski]

Not sure if there are any JS runtimes (vite in your case) that support importing TS types on a .js file (or .jsx in your case).

You can try import type { TooltipRefProps } from 'react-tooltip', but I'm not sure if that'll work either.

If it doesn't, just remove any references to TooltipRefProps from your code, the tooltip will still work the same.

It's that or migrating to TypeScript, which is probably not viable for you).

[izquierdorama]

Thank you very much, yes indeed, it works without that property, unfortunately I need it to show the tooltip when a button is pressed, the idea is that if there is an error the tooltip is shown, I don't know if there is another alternative Anyway, I tried the import type and I couldn't get it to work, in the same way I searched the Vite documentation, I still can't find how to fix it, thank

[gabrieljablonski]

it works without that property, unfortunately I need it to show the tooltip when a button is pressed

What I meant is that you don't need those props to get the "imperative mode" to work for the tooltip, since they're simply TypeScript types and don't interfere in usability.

If you've seen the example for the imperative mode on our docs, here's a TS vs JS snippet of the example with what you need to change for it to work with plain JS/JSX.

TypeScript:

import { useRef } from 'react';
import { Tooltip, TooltipRefProps } from 'react-tooltip';

const tooltipRef1 = useRef<TooltipRefProps>(null)
const tooltipRef2 = useRef<TooltipRefProps>(null)

// rest of the example
// ...

Plain JS:

import { useRef } from 'react';
import { Tooltip } from 'react-tooltip';

const tooltipRef1 = useRef(null)
const tooltipRef2 = useRef(null)

// the rest of the code remains exactly the same 
// ...

[izquierdorama]

Thank you, making that change, it works correctly for me, thank you very much