How to use it with TypeScript and React 18?

[freddi301]

is not assignable to type 'React.ReactNode' kind of error

[KatFishSnake]

Works like a charm in our TS, R18 codebase, where / when do you see the error pop up?, does it break the functionality or just a warning?

[thepixelmonk]

Works like a charm in our TS, R18 codebase, where / when do you see the error pop up?, does it break the functionality or just a warning?

R18 isn't even in beautiful-dnd's peerDependencies so npm won't install them together, how are you running them?

[KatFishSnake]

@thepixelmonk 🤔 you install it into an R18 app, it doesn't need to have it as a dependency, the only caveat is no strict mode support https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1127485543

[Yasamato]

I do not have enabled React.StrictMode, but I still get the following typing errors in TS:

TS2786: 'Droppable' cannot be used as a JSX component.
Its instance type 'Droppable' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("/Users/[...]/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

For Droppable, Draggable and DragDropContext. This looks to me not like an Strictmode thing, but an conflict within the index.d.ts

[KatFishSnake]

@Yasamato pretty obvious question but have you updated your local package.json @types/react, and rebuilt?

our versions: "@types/react": "18.0.9", "react": "18.1.0", "react-dom": "18.1.0", "react-beautiful-dnd": "13.1.0",

i repeat works like a charm

[Yasamato]

Yes, I did: yarn upgrade-interactive --latest works like a charm

Maybe for debug purposes, but the deps I tested it with are:

  "dependencies": {
    "@tailwindcss/line-clamp": "^0.4.0",
    "next": "^12.1.6",
    "react": "^18.1.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^18.1.0",
    "react-full-screen": "^1.1.0",
    "react-player": "^2.10.1",
    "react-tooltip": "^4.2.21",
    "redis": "^4.1.0",
    "sharp": "^0.30.5",
    "socket.io": "^4.5.1",
    "socket.io-client": "^4.5.1",
    "swr": "^1.3.0",
    "unique-names-generator": "^4.7.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.35",
    "@types/react": "^18.0.9",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.5",
    "autoprefixer": "^10.4.7",
    "classnames": "^2.3.1",
    "eslint": "8.16.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.24",
    "ts-node": "^10.8.0",
    "typescript": "4.7.2"
  }

but as the other dependencies aren't really interfering with typing from my understanding, it should already conflict with the minimal case of:

"dependencies": {
    "react": "^18.1.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^18.1.0"
},
"devDependencies": {
    "@types/react": "^18.0.9",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.5",
    "ts-node": "^10.8.0",
    "typescript": "4.7.2"
}

while tsconfig.json is:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "baseUrl": ".",
    "moduleResolution": "node",
    "strict": true,
    "allowJs": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "isolatedModules": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "incremental": true
  },
  "exclude": ["dist", ".next", "out", "next.config.js"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Wait a minute, you aren't using @types/react-beautiful-dnd, are you? Then it's no wonder you don't get type errors, because react-beautiful-dnd itself isn't typed as far as I know

[KatFishSnake]

@Yasamato sorry yes, we use "@types/react-beautiful-dnd": "13.1.2", as well, i forgot to post it up in that comment

possibly we use a bit older typescript version "typescript": "4.5.5",

but as the other dependencies aren't really interfering with typing from my understanding, it should already conflict with the minimal case of:

can you codepen confirm this theory

and possibly helpful; this is the mapping of our package versions to the minimal example you posted above "react": "18.1.0", "react-dom": "18.1.0", "react-beautiful-dnd": "13.1.0",

"@types/react": "*",
"@types/react-beautiful-dnd": "13.1.2",
"@types/react-dom": "18.0.5",
"typescript": "4.5.5"

[freddi301]

fixed with as any for now, i will do more testing in future

[YaronLipshitzJustt]

Hey, had the same issue with this and a few other packages. The issue that I had was that React Beautiful DnD was dependent on @types/react/* which was resolved to React 17.

I solved it by adding to the package.json a "resolution" field with the react types.

	"resolutions": {
		"**/@types/react": "18.0.14"
	}

This should work if you're using yarn.

If you're using NPM there's also a different way for conflict resolution.

[Xhale1]

🎉 @hello-pangea/dnd now supports React 18 and react strict mode (and is fully written in TypeScript)!

1. npm install @hello-pangea/dnd
2. Replace all imports of react-beautiful-dnd with @hello-pangea/dnd
3. Enjoy :)