Incompatible with "@types/react": "18.2.21"

[samhenderson511]

Expected behavior

Actual behavior

Type errors when using the latest version of React types: Droppable cannot be used as a JSX component...

Steps to reproduce

Use these dependencies

    "@types/react": "18.2.25",
    "@types/react-beautiful-dnd": "^13.1.5",
    "@types/react-dom": "18.2.10",

Suggested solution?

What version of React are you using?

18.2.0

What version of react-beautiful-dnd are you running?

13.1.1

What browser are you using?

Arc

[dannyOhNo]

Experiencing the same issue. This is browser independent and can be reproduced during build time.

[rasulomaroff]

Having the same issue, but was able to kind of fix that by using some hacks. Don't really like the solution though, but it works as a temporary solution:

import { FC } from 'react'
import {
  DragDropContext as _DragDropContext,
  DragDropContextProps,
  Droppable as _Droppable,
  DroppableProps,
  Draggable as _Draggable,
  DraggableProps
} from 'react-beautiful-dnd'

// HACK: this fixes type incompatibility
const DragDropContext = _DragDropContext as unknown as FC<DragDropContextProps>
const Droppable = _Droppable as unknown as FC<DroppableProps>
const Draggable = _Draggable as unknown as FC<DraggableProps>

[rasulomaroff]

I also don't think the issue is opened in a right repository. This library is written in pure JS and doesn't provide types. Since you're using @types/react-beautiful-dnd package for types, I believe it's better to move this issue there.

[tenghuan123]

I also have this problem. I found that when I used npm ls @types/react to check the dependencies of packages in my project, there were two versions of @types/react in my project. I removed the old version and upgraded @types/react to the latest version. The ts error was solved. I hope this can help you

[tenghuan123]

I also have this problem. I found that when I used npm ls @types/react to check the dependencies of packages in my project, there were two versions of @types/react in my project. I removed the old version and upgraded @types/react to the latest version. The ts error was solved. I hope this can help you

"@types/react": "18.2.25",
"@types/react-beautiful-dnd": "^13.1.5",
"@types/react-dom": "18.2.10",

You see, the version of @types/react here is fixed to 18.2.25, but in fact, @types/react-beautiful-dnd itself depends on the latest version of @types/react.

You can modify it like this, but I'm not sure it's necessarily correct. Maybe there are other scenarios in your repository that need to lock the @types/react version?

"@types/react": "^18.2.25",
"@types/react-beautiful-dnd": "^13.1.5",
"@types/react-dom": "^18.2.10",

[marpstar]

I also have this problem. I found that when I used npm ls @types/react to check the dependencies of packages in my project, there were two versions of @types/react in my project. I removed the old version and upgraded @types/react to the latest version. The ts error was solved. I hope this can help you

This solved my issue. I upgraded my @types/react to match version 18.0.5 that was being pulled in.

└─┬ [email protected]
  └─┬ [email protected]
    └─┬ @types/[email protected]
      ├─┬ @types/[email protected]
      │ └── @types/[email protected]
      └── @types/[email protected]