search

Buuntu / fastapi-react

🚀 Cookiecutter Template for FastAPI + React Projects. Using PostgreSQL, SQLAlchemy, and Docker
MIT License
2.19k stars 349 forks source link

Typescript error 'Router' cannot be used as a JSX component. #207

Open Blaz-Strusnik opened 1 year ago

Blaz-Strusnik commented 1 year ago

Failed to compile.

/app/src/index.tsx TypeScript error in /app/src/index.tsx(8,4): 'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition-group/node_modules/@types/react/ts5.0/index").ReactNode'. TS2786

     6 | 
     7 | ReactDOM.render(
  >  8 |   <Router>
       |    ^
     9 |     <App />
    10 |   </Router>,
    11 |   document.getElementById('root')
itsMagondu commented 11 months ago

+1

Robowizx commented 7 months ago

The issue is occurring due to using old type definitions of React and react router. Can upgrade the types packages under the package.json file to newer ones to avoid getting that error. I personally upgraded the following to fix it.

"@types/react": "^18.2.52", "@types/react-dom": "^18.2.18", "@types/react-router-dom": "^5.3.3",