Support React 19 & Nextjs 15

[downright-development]

Hey friends!

Love the project but prevents me from going to Nextjs 15 & react 19.

Any timeline on when dependencies will be updated to support react 19?

[downright-development]

Ping :) Been a week without any feedback. Any way we can help?

[muhaimincs]

Type error: 'SortableContext' cannot be used as a JSX component.
  Its type '({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props) => Element' is not a valid JSX element type.
    Type '({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props) => Element' is not assignable to type '(props: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.

[brasillero]

try npm i --force or npm i --legacy-peer-deps, it might do the trick

[samuelkingtwentytwo]

Is there a timeline kindly? I hate using hacks like peer-deps d:

[TrustyTechSG]

Can we have a estimated timeline on this? Big thanks.

[brasillero]

Is there a timeline kindly? I hate using hacks like peer-deps d:

I understand your concern, but using --legacy-peer-deps or --force isn't a hack—it's a temporary solution to help you move forward while the issue is being addressed. If your deadline allows you to stop just because you don't like a workaround, it might be worth waiting for the final version. In the end, using this 'hack' is just to install packages, and once it's stable, you can simply delete your lock-file and continue with the good old npm install.

[Philipp91]

EDIT: I've moved this to #1559.

There's a bunch of these errors too:

node_modules/@dnd-kit/core/dist/components/Accessibility/Accessibility.d.ts:9:129 - error TS2503: Cannot find namespace 'JSX'.

9 export declare function Accessibility({ announcements, container, hiddenTextDescribedById, screenReaderInstructions, }: Props): JSX.Element | null;

Possibly related to https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript.

As we can see in the tests of https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69022, we need s/JSX.Element/React.JSX.Element. It's just that most occurrences in dnd-kit aren't actually spelled out in its code, e.g. the Accessibility component has no explicit return type. Somehow the type is inferred when generating the d.ts files.

Actually if I update to newer @react/types in this repo, it fails with a related error:

(typescript) Error: /home/philipp/repos/dnd-kit/packages/core/src/components/DndContext/DndContext.tsx(740,8): semantic error TS2786: 'Accessibility' cannot be used as a JSX component.
Its return type 'Element | ReactPortal | null' is not a valid JSX element.
Type 'ReactPortal' is not assignable to type 'ReactElement<any, any>'.
Types of property 'key' are incompatible.
Type 'Key | null' is not assignable to type 'string | null'.
Type 'number' is not assignable to type 'string'.

[DyKhang]

hey bro make sure you use "use client" on the top of parent component & "suppressHydrationWarning" attribute in each dragable element. I'm use react19 & nextjs15 it work so fine

[Verino-profico]

Also facing the same issue (Next.js 15 & React 19). We just need the dependencies to be updated. The build can succeed withskipLibraryCheck, but I don't think that's a viable solution.

[sirpeas]

Any updates on this?

[xepozz]

Just create a type file, e.g. dnd-kit.d.ts with the following content

export * from '@dnd-kit/sortable';

declare module '@dnd-kit/sortable' {
  import React from 'react';
  import { ClientRect, UniqueIdentifier } from '@dnd-kit/core';
  import type { Disabled, SortingStrategy } from '../types';
  export interface Props {
    children: React.ReactNode;
    items: (UniqueIdentifier | {
      id: UniqueIdentifier;
    })[];
    strategy?: SortingStrategy;
    id?: string;
    disabled?: boolean | Disabled;
  }
  interface ContextDescriptor {
    activeIndex: number;
    containerId: string;
    disabled: Disabled;
    disableTransforms: boolean;
    items: UniqueIdentifier[];
    overIndex: number;
    useDragOverlay: boolean;
    sortedRects: ClientRect[];
    strategy: SortingStrategy;
  }
  export declare const Context: React.Context<ContextDescriptor>;
  export declare function SortableContext({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props): React.ReactElement;
}

[faridvatani]

Hi @clauderic 👋

I’m currently running into a TypeScript error when using SortableContext with the latest versions of React, Next.js, and TypeScript. My setup includes React 19.2.0, Next.js 15.5.4, and TypeScript 5.9.3, along with the following dnd-kit packages:

{
  "@dnd-kit/core": "^6.3.1",
  "@dnd-kit/modifiers": "^9.0.0",
  "@dnd-kit/sortable": "^10.0.0",
  "@dnd-kit/utilities": "^3.2.2"
}

I’m getting this error when trying to use SortableContext in a client component. I’ve already added "use client" at the top, checked the TypeScript config, reinstalled dependencies, and made sure I’m not using any custom .d.ts overrides, but the issue is still there. Everything compiles fine until SortableContext is rendered, at which point the JSX type check fails with the following error:

'SortableContext' cannot be used as a JSX component.
  Its type '({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props) => Element' is not a valid JSX element type.
    Type '({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Type 'Element' is not assignable to type 'ReactNode | Promise<ReactNode>'.
        Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

Screenshot of the error:

Could this be related to React 19 or the latest Next.js version? If not, any guidance or an update on supporting the latest versions would be really appreciated.