Upgrade from React 17 to React 19

[devin-ai-integration]

Summary

Upgrades the project from React 17 (^17.0.2) to React 19 (^19.0.0), including all necessary dependency updates, entry point migration, and compatibility fixes.

Changes

Dependencies updated in package.json:

• react: ^17.0.2 → ^19.0.0
• react-dom: ^17.0.2 → ^19.0.0
• @testing-library/react: ^12.1.4 → ^16.0.0 (React 19 compatible)
• @testing-library/user-event: ^13.5.0 → ^14.5.0 (compatible with @testing-library/react v16)
• react-scripts: 5.0.0 → 5.0.1

Entry point migration (src/index.js):

• Replaced ReactDOM.render() with createRoot() API (React 18+ requirement)
• Changed import from react-dom to react-dom/client

findDOMNode removal fix (Modal.jsx, Alert.jsx):

• react-transition-group's CSSTransition internally used ReactDOM.findDOMNode, which was removed in React 19
• Added nodeRef prop to all CSSTransition usages to bypass findDOMNode and provide DOM nodes directly via refs

Deprecated API audit:

• No other usage of removed APIs found (componentWillMount, componentWillReceiveProps, componentWillUpdate, defaultProps on function components, string refs, legacy Context API)

Build verification:

• Production build compiles successfully
• Dev server runs correctly
• Prettier formatting checks pass

Review & Testing Checklist for Human

• Run npm start and verify the game loads without runtime errors (the findDOMNode fix is critical)
• Play a full round: type a word, submit, verify letter color feedback (green/yellow/gray)
• Test both hardware keyboard and virtual keyboard input
• Open Settings modal → toggle Dark Mode off/on, High Contrast Mode on/off
• Verify Info modal and Stats modal open/close with fade animations (CSSTransition fix)

Notes

• The existing test in App.test.jsx was already failing on main before this upgrade (it's a leftover CRA template test that looks for "learn react" text and doesn't wrap App in AlertProvider). This is a pre-existing issue, not introduced by this upgrade.
• react-countdown, react-transition-group, and react-icons are compatible with React 19 at their current versions and did not need upgrading.
• The nodeRef approach is the recommended migration path for react-transition-group with React 19 (see react-transition-group docs).

Link to Devin session: https://app.devin.ai/sessions/e261f82023d04ca2b4405a7826756838
Requested by: @shahmir-masood

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

End-to-End Test Results

Ran the app locally on React 19 and tested all core functionality via browser UI.

Escalation: Initial testing revealed a findDOMNode crash — react-transition-group's CSSTransition uses ReactDOM.findDOMNode which was removed in React 19. Fixed by adding nodeRef prop to all CSSTransition usages (commit 1bb85a5).

Game Flow (Primary Test)

• App renders on React 19 with createRoot — passed
• Info modal opens on fresh load (CSSTransition + nodeRef fix) — passed
• Hardware keyboard input registers letters in grid — passed
• Guess submission shows correct color feedback — passed (C=yellow/present, W,H,I,H=gray/absent for "WHICH" against solution "CRATE")
• Game win triggers "Well done" alert — passed
• Stats modal auto-opens with correct data — passed (1 played, 100% win rate, distribution bar at row 2)

Game won	Stats modal

Settings Modal

• Dark Mode toggle OFF — passed (background dark→light)
• High Contrast Mode toggle ON — passed (present tiles yellow→cyan, correct tiles green→orange)
• Settings persist after modal close — passed

Dark Mode OFF	High Contrast ON	Persisted

Bug Found & Fixed

ReactDOM.findDOMNode was removed in React 19. react-transition-group's CSSTransition uses it internally. Fixed by adding nodeRef prop to Modal.jsx and Alert.jsx.

Devin session