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

8

22

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

Amends answered 14/8, 2023 at 11:1 Comment(4)
I think this could be the solution for you too. Try it!Breban
I found no way to apply this solution to my problem. My theory is that it's got something to do with Typescript since i get the errors in my old project as well.Amends
Please provide enough code so others can better understand or reproduce the problem.Policy
Solved this by clearing VS Codes cache: bobbyhadz.com/blog/vscode-clear-cacheAmends
A
4

Solved this by clearing VS Codes cache

Amends answered 26/12, 2023 at 8:6 Comment(2)
This solution is not working for me.Dionnedionysia
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.Aerification
I
26

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

Infantilism answered 19/11, 2023 at 12:26 Comment(0)
C
11

Adding "@types/react" to the "devDependencies" in package.json using the same version as the react version used in the project and then running npm i helped me. If it can't resolve peer dependencies, try npm i --legacy-peers-deps.

Communalize answered 4/10, 2023 at 9:1 Comment(1)
it didn't solve the issue on my side :'(Dugald
A
4

Solved this by clearing VS Codes cache

Amends answered 26/12, 2023 at 8:6 Comment(2)
This solution is not working for me.Dionnedionysia
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.Aerification
C
1

I had compilerOptions.module set to "es2022". Setting "moduleResolution": "Bundler" in my tsconfig.json compilerOptions settings fixed this up for me.

Cladophyll answered 9/7 at 18:47 Comment(1)
Wish I knew WHY, but this worked for mePostmark
R
1

I corrected the issue by removing @types/react and @types/react-dom. I then reloaded the Developer window in VS Code and reinstalled the latest versions of @types/react and @types/react-dom (18.3.3 at the time).

Refinery answered 10/7 at 19:35 Comment(0)
C
0

In my case, fixing my dependencies with npm audit fix somehow fixed all my errors.

Cognition answered 18/10, 2023 at 8:27 Comment(0)
F
0

I had an indirect dependency on @types/prop-types >= 15.7.8 in my package-lock.json file.

Adding @types/prop-types with version 15.7.7 fixed the problem

Frolicsome answered 23/5 at 17:57 Comment(0)
N
0

For me it was "dom" missing from tsconfig.json's compilerOptions.lib.

Go figure.

https://react.dev/learn/typescript#adding-typescript-to-an-existing-react-project

Nissa answered 30/5 at 19:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.