React Type Error: not assignable LegacyRef && ‘V’ refers to a value, did you mean ‘typeof V’?

You may encounter this kind of error when you work with third-party libraries.
I am using react-konva in my project and I passed ref to use the functions of the component.

const stageRef = useRef<Stage>(null); ...
<Stage ref={stageRef} />
Enter fullscreen mode
Exit fullscreen mode

'Stage' refers to a value, but is being used as a type here. Did you mean 'typeof Stage'?

And this error happens, yes, right, the stage is a component. I should have passed a type, but it was weird… because I think I have seen from the lint that Stage needs to be passed as a type.

const stageRef = useRef<typeof Stage>(null); ...
<Stage ref={stageRef} />
Enter fullscreen mode
Exit fullscreen mode

Type 'RefObject<KonvaNodeComponent<Stage, StageProps>>' is not assignable to type 'LegacyRef<Stage> | undefined'.

And then this error happened. Stage is a value, but it says I should use it as a type and then it says Stage is not a type. 🤷‍♂️

const stageRef: ComponentProps<typeof Stage>['ref'] = useRef(null);
Enter fullscreen mode
Exit fullscreen mode

I solved the issue using ComponentProps.
Ah, Typescript…!!…

I hope someone finds it helpful!

Happy Coding!


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Building your web development portfolio : tips and tricks for demonstrating your skills web develop mentor.