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>

[dtasev-ecmwf]

Unfortunately the fix above stopped working for some reason for me. For my simple use-case I realised that this dependency is likely an overkill when all the movement logic I need is:

const top = e.currentTarget.parentElement!.getBoundingClientRect().top;
e.currentTarget.parentElement!.style.top = top + e.movementY + 'px';
const left = e.currentTarget.parentElement!.getBoundingClientRect().left;
e.currentTarget.parentElement!.style.left = left + e.movementX + 'px';

essentially ending up with

import React, { memo, useCallback, useState } from 'react';

const Draggable = memo(function (props: { children: any, position: { x: number, y: number }}) {
    const [dragging, setDragging] = useState<boolean>(false);

    const moveWidget = useCallback((e: React.MouseEvent) => {
        if (dragging) {
            const top = e.currentTarget.parentElement!.getBoundingClientRect().top;
            e.currentTarget.parentElement!.style.top = top + e.movementY + 'px';
            const left = e.currentTarget.parentElement!.getBoundingClientRect().left;
            e.currentTarget.parentElement!.style.left = left + e.movementX + 'px';
        }
    }, [dragging]);

    return <div style={{ position: 'absolute', top: props.position.y, left: props.position.y }} >
        <div className="handle"
            onMouseDown={() => setDragging(true) }
            onMouseUp={() => setDragging(false) }
            onMouseEnter={() => setDragging(false) }
            onMouseMove={moveWidget}>
        </div>
        {props.children}
    </div>;
});

as a super basic drop-in.