useRef "refers to a value, but is being used as a type here."

Question

I'm trying to figure out how to tell react which element is being used as ref i.e. in my case

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle is an SVG component from a third party library, and defining it this way causes error

Is there some universal way to define which element is ref?

Solution 1

AnimatedCircle is a function, not a type. This means it cannot be used in TypeScript in place of a type, like in the generic constraint of useRef. Instead, you need to use the typeof operator to convert to a type:

const circleRef = useRef<typeof AnimatedCircle | null>(null);

Solution 2

In my case, I renamed the file as .ts instead of .tsx. Renaming it again fixed it.

Solution 3

I was getting the same error in

ReactDOM.render(
<App store={store} persistor={persistor} basename={PUBLIC_URL} />,
document.getElementById("root");

And I renamed the file to .tsx and that fixed the problem. The reason is that, when you are using React or ReactDOM, you have to rename file to .tsx instead of ts. For JavaScript, .js works but for TypeScript, .ts don't work.

Comments

[Namrata Das]

Can you share the definitions of useRef and AnimatedCircle?

[Heretic Monkey]

Possible duplicate of Why does 'instanceof' in TypeScript give me the error "'Foo' only refers to a type, but is being used as a value here."?

[T.J. Crowder]

Constructor functions are typically types too, aren't they?

[Dan]

Yes, but since the OP states that AnimatedCircle is a component type and they are getting this error I'm willing to bet it's a function and not a class.

[T.J. Crowder]

Unfortunate name for one, if it's not a constructor, as it breaks the basic naming rule of JavaScript/TypeScript. :-)

[Dan]

In React, all component types are conventionally TitleCase. Lower case names are used to distinguish between native DOM elements (div, x-your-name-here, etc) and custom React components (AnimatedCircle). While it breaks the convention of javascript / typescript, it is the convention in React mostly because there's no other non-clumsy way to make React work with custom elements and/or new tags

[T.J. Crowder]

Oh, I'm v. familiar with that, I'm just used to thinking of them as constructors. But of course, functional components aren't, from TypeScript's type perspective, constructors, and with hooks basically all components become functional ones. Bit of a pain, I expect it'll get addressed. :-)

[tmos]

man, all my trouble was this mistake! tanks, you just fixed my situation, 3h into searching all the internet about this.

[raarts]

What is the | null for?

[Nick Zuber]

I was just getting ready to throw my computer out a window — thank you!! The file extension was the last place I was gonna look

[Dan]

@raarts late reply, sorry! if you used strict null checking in typescript, passing null to useRef wasn't (isn't?) without explicitly adding it in the type signature and would result in a type error. useRef<typeof AnimatedCircle>(null); would fail because null is not assignable to typeof AnimatedCircle

[Michael Freidgeim]

There is a similar question with the same answer stackoverflow.com/questions/58341545/…