ReactTooltip/react-tooltip

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

izquierdorama opened this issue · 4 comments

izquierdorama commented

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
image

**Desktop **

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

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 commented

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 commented

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 commented

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

  • 👍1