Getting "Type 'Element' is not assignable to type 'ReactNode'." when creating a React app with Vite

Question

I have created a React app with Typescript with npm create vite@latest. When I have done like this before everything have been working fine but when I did it today I get the errors: Type 'Element' is not assignable to type 'ReactNode'. Type 'Element' is not assignable to type 'ReactPortal'.

The page works fine in the browser without any errors though.

I'm using Visual studio code version: 1.81.1 and Typescript version 5.1.6.

These errors also shows up when I open previous projects that have been working fine in the past.

I have tried changing settings in tsconfig.json, for example moduleResolution: bundler --> node, but it did not help.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Image of code and errors

Answer 1

Upgrade your "@types/react" in devDependencies to 18.2.25 as such:

"devDependencies": {
    ...
    "@types/react": "18.2.25",
    ...
  },

also in my case, i had to add the same version to "overrides" too, while keeping react-dom 18.2.0