Property 'ReactNode' does not exist on type 'typeof React'

I am using VSCode and tried this with apps made with both npx create-react-app my-app --template typescript and npm create vite@latest and followed the setup in the terminal choosing react and typescript. I already selected use Workspace typescript version in vs code.

I go to the app.tsx file in both apps and do

import React, { ReactNode } from "react";

...

React.ReactNode;

The import of ReactNode is fine, no errors. However React.ReactNode; gives the error: Property 'ReactNode' does not exist on type 'typeof React'. And when typing React. intellisense suggests many things that are actually in the React namespace like Children, Fragment, useState, etc., but ReactNode is not one of them.

I tried making my project ts version match the ts version in @types/react as mentioned here: https://stackoverflow.com/a/55861272/10398996 but that didn't work.

I'm not sure what is going wrong and any help would be appreciated.

I've just run into this issue - and for me it's because I had a typo

                              👇 // no variable declaration here
function useXyz(value: number,   (data: number) => React.ReactNode)  : string{

  return "foo"
}

TypeScript isn't seeing a TypeScript annotation, it's seeing a straight function declaration, that's attempting to return a property on the actual React default export.

The React object doesn't contain a 'ReactNode' property, (and it's not typed that way) so TypeScript is giving an error.

You'll see the same thing with just something like

import React from "react"; 

// Property 'ReactNode' does not exist on type 'typeof React'.ts(2339)

console.log(React.ReactNode); 

Whereas the reason that you can reference React.ReactNode as a typing is because it's making use of TypeScript namespacing, where essentially we can reference both typings and real objects via the same default import, which is convenient.