Add "use client" to DragDropProvider for React 19 compatibility in @dnd-kit/react

[pedro757]

You have to add "use client"; at the top of the file, to allow us to use this Component in a server component

[clauderic]

There's a use client here: https://github.com/clauderic/dnd-kit/blob/experimental/packages/react/src/core/index.ts#L1

Is that not sufficient?

[pedro757]

It doesn't work, I had to wrap it in a "use client"; file like this:

// provider.tsx
"use client";

import { DragDropProvider } from "@dnd-kit/react";

export function Layout(props: { children: React.ReactNode }) {
  return <DragDropProvider>{props.children}</DragDropProvider>;
}

And Import it in the layout like this:

import { Layout } from "./provider";

export default Layout;

Otherwise if I don't put "use client"; I get this error:

TypeError: (0 , {imported module [project]/nodemodules/next/dist/server/route-modules/app-page/vendored/rsc/react.js [app-rsc] (ecmascript)}.createContext) is not a function

[clauderic]

I added it here https://github.com/clauderic/dnd-kit/commit/42bec2c507adf5659d70a1d5fba33847b0efe016, can you try out this version of @dnd-kit/react and let me know if it works: 0.1.2-beta-20250421131817

[pedro757]

No, this version doesn't work either: "@dnd-kit/react": "0.1.2-beta-20250421131817",

[clauderic]

There's a "use client" at the top of the file now, so not sure why it's not working?