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'.

[lucarampi]

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.

[lucarampi]

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 DefinitelyTyped/DefinitelyTyped#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?