Skip to content

Commit 729415f

Browse files
Samuel ReedSculptor
andcommitted
chore: upgrade to React 19 and update dev dependencies
- Update react, react-dom to v19; update @types/react, @types/react-dom to v19 - Remove react-test-renderer (deprecated in React 19) - Update findDOMNode() in Draggable and DraggableCore to check nodeRef first, then fallback to ReactDOM.findDOMNode if available (for React 18 compat) - Rewrite tests to use wrapper components that provide nodeRef (required in React 19) - Update typings/test.tsx to use createRoot API instead of ReactDOM.render - Update browser test HTML to use ES modules with importmap (React 19 removed UMD) - Update all other dev dependencies to latest versions Co-authored-by: Sculptor <sculptor@imbue.com>
1 parent daa9741 commit 729415f

File tree

8 files changed

+1869
-1960
lines changed

8 files changed

+1869
-1960
lines changed

lib/Draggable.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,10 +241,17 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
241241
}
242242
}
243243

244-
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
245-
// the underlying DOM node ourselves. See the README for more information.
244+
// React 19 removed ReactDOM.findDOMNode, so nodeRef is now required.
245+
// For backward compatibility with React 18 and earlier, we still support findDOMNode if available.
246246
findDOMNode(): ?HTMLElement {
247-
return this.props?.nodeRef?.current ?? ReactDOM.findDOMNode(this);
247+
if (this.props?.nodeRef) {
248+
return this.props.nodeRef.current;
249+
}
250+
// ReactDOM.findDOMNode was removed in React 19
251+
if (typeof ReactDOM.findDOMNode === 'function') {
252+
return ReactDOM.findDOMNode(this);
253+
}
254+
return null;
248255
}
249256

250257
onDragStart: DraggableEventHandler = (e, coreData) => {

lib/DraggableCore.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -269,10 +269,22 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
269269
}
270270
}
271271

272-
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
273-
// the underlying DOM node ourselves. See the README for more information.
272+
// React 19 removed ReactDOM.findDOMNode, so nodeRef is now required.
273+
// For backward compatibility with React 18 and earlier, we still support findDOMNode if available.
274274
findDOMNode(): ?HTMLElement {
275-
return this.props?.nodeRef ? this.props?.nodeRef?.current : ReactDOM.findDOMNode(this);
275+
if (this.props?.nodeRef) {
276+
return this.props.nodeRef.current;
277+
}
278+
// ReactDOM.findDOMNode was removed in React 19
279+
if (typeof ReactDOM.findDOMNode === 'function') {
280+
return ReactDOM.findDOMNode(this);
281+
}
282+
// In React 19+, nodeRef is required - log a warning via our log utility
283+
log(
284+
'react-draggable: ReactDOM.findDOMNode is not available in React 19+. ' +
285+
'You must provide a nodeRef prop. See: https://github.com/react-grid-layout/react-draggable#noderef'
286+
);
287+
return null;
276288
}
277289

278290
handleDragStart: EventHandler<MouseTouchEvent> = (e) => {

package.json

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,31 +52,30 @@
5252
"@babel/preset-flow": "^7.27.1",
5353
"@babel/preset-react": "^7.28.5",
5454
"@eslint/eslintrc": "^3.3.3",
55-
"@eslint/js": "^9.39.1",
55+
"@eslint/js": "^9.39.2",
5656
"@testing-library/dom": "^10.4.1",
57-
"@testing-library/react": "^16.3.0",
58-
"@types/node": "^24.10.2",
59-
"@types/react": "^18.2.23",
60-
"@types/react-dom": "^18.2.8",
57+
"@testing-library/react": "^16.3.1",
58+
"@types/node": "^25.0.3",
59+
"@types/react": "^19.2.7",
60+
"@types/react-dom": "^19.2.3",
6161
"@vitejs/plugin-react": "^5.1.2",
6262
"babel-loader": "^10.0.0",
6363
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
64-
"eslint": "^9.39.1",
64+
"eslint": "^9.39.2",
6565
"eslint-plugin-react": "^7.37.5",
6666
"flow-bin": "^0.217.0",
6767
"globals": "^16.5.0",
68-
"jsdom": "^27.3.0",
68+
"jsdom": "^27.4.0",
6969
"pre-commit": "^1.2.2",
7070
"process": "^0.11.10",
71-
"puppeteer": "^24.32.1",
72-
"react": "18",
73-
"react-dom": "18",
71+
"puppeteer": "^24.34.0",
72+
"react": "19",
73+
"react-dom": "19",
7474
"react-frame-component": "^5.2.7",
75-
"react-test-renderer": "18",
7675
"semver": "^7.7.3",
7776
"typescript": "^5.9.3",
78-
"vitest": "^4.0.15",
79-
"webpack": "^5.103.0",
77+
"vitest": "^4.0.16",
78+
"webpack": "^5.104.1",
8079
"webpack-cli": "^6.0.1",
8180
"webpack-dev-server": "^5.2.2"
8281
},

0 commit comments

Comments
 (0)