error in react 19

[daviderusso1984]

Draggable.js:210 Uncaught TypeError: _reactDom.default.findDOMNode is not a function at Draggable.findDOMNode (Draggable.js:210:1) at Draggable.componentDidMount (Draggable.js:194:1) at react-stack-bottom-frame (react-dom-client.development.js:22451:1) at runWithFiberInDEV (react-dom-client.development.js:543:1) at commitLayoutEffectOnFiber (react-dom-client.development.js:11419:1) at recursivelyTraverseLayoutEffects (react-dom-client.development.js:12410:1) at commitLayoutEffectOnFiber (react-dom-client.development.js:11413:1) at recursivelyTraverseLayoutEffects (react-dom-client.development.js:12410:1) at commitLayoutEffectOnFiber (react-dom-client.development.js:11529:1) at recursivelyTraverseLayoutEffects (react-dom-client.development.js:12410:1)

[Mirott]

I have the same problem

[andreatiled]

A simple workaround is to provide a ref to a child element:

<Draggable nodeRef={myRef}>
   <div ref={myRef} />
</Draggable>

[SValentyn]

Thanks andreatiled The workaround above worked for me, but there were type conflicts, so I had to manually set the ref type.

in child component:

const CountryPopup = forwardRef<HTMLDivElement, CountryPopupProps>(({country}, ref) => {
    return (
        <Draggable
            nodeRef={ref as RefObject<HTMLElement>}
            allowAnyClick={true}
        >
            <div
                ref={ref}
                ...

in parent component:

...
const popupRef = useRef<HTMLDivElement>(null);
...
<CountryPopup ref={popupRef} country={currentCountry}/>

[siamahnaf]

very important package it is. React 19 support is required now. If anyone using alternative package please inform me?

[ellis]

Thanks @andreatiled ! That worked for me. Like @SValentyn , I also had a type error, but I just cast it.

[galangel]

@andreatiled Thank you very much

[rhyek]

The nodeRef solution does not work when actually using React 19. More info here.

[Floryvibla]

The nodeRef solution does not work when actually using React 19. More info here.

It works, you need to type it like @SValentyn comment mentioned

[rhyek]

The nodeRef solution does not work when actually using React 19. More info here.

It works, you need to type it like @SValentyn comment mentioned

It's not about types. Did you read the issue I linked?

[phongkien]

The nodeRef solution does not work when actually using React 19. More info here.

It works, you need to type it like @SValentyn comment mentioned

It's not about types. Did you read the issue I linked?

It does works, I think he meant "type" as in copying https://github.com/react-grid-layout/react-draggable/issues/771#issuecomment-2545737391 suggestion.

e.g.

import React, { useRef } from "react";
import Draggable from "react-draggable";

const ComponentTest: React.FC = () => {
  const nodeRef = useRef<any>(null);

  return (
    <Draggable nodeRef={nodeRef}>
      <div
        ref={nodeRef}<==============ref here is important
        style={
          {
            width: "400px",
            height: "200px",
            background: "green",
          }
        }
      >
        <div>Hello world</div>
      </div>
    </Draggable>
  );
};

[RM-Eric]

How would the ref work with the ResponsiveGridLayout component?