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
Install portainer with docker compose yaml file. Unlimited web space.