OpenNoodl/dev-docs/tasks/phase-1/TASK-001-dependency-updates/CHANGELOG.md

TASK-001 Changelog

Track all changes made during this task. Update this file as you work.

---

[2025-06-12] - Cline (AI-assisted)

Summary

Fixed React 19 TypeScript compatibility errors that were preventing the build from completing. The previous developer updated dependencies but did not address all the TypeScript compatibility issues with the new @types/react package.

Starting Point

• Based on branch: 12-upgrade-dependencies
• Previous work by: previous developer
• Previous commits include:
  • Package.json dependency updates (React 17 → 19)
  • "Update rendering to use non-deprecated react-dom calls"

---

React 19 TypeScript Fixes

Issue 1: Unused @ts-expect-error directives

React 19's types fixed some underlying issues that were previously suppressed with @ts-expect-error. These now cause errors when the underlying issue no longer exists.

Issue 2: useRef() requires explicit type parameter

In React 19's types, useRef() without a type parameter returns RefObject<unknown>, which is not assignable to more specific ref types.

Fix: Changed useRef() to useRef<HTMLDivElement>(null)

Issue 3: JSX namespace moved

In React 19, JSX is no longer a global namespace. It must be accessed as React.JSX.

Fix: Changed keyof JSX.IntrinsicElements to keyof React.JSX.IntrinsicElements

Issue 4: ReactFragment export removed

React 19 no longer exports ReactFragment. Use Iterable<React.ReactNode> instead.

Issue 5: children not implicitly included in props

React 19 no longer implicitly includes children in component props. It must be explicitly declared.

Fix: Added children?: React.ReactNode to component prop interfaces.

Issue 6: ReactDOM.findDOMNode removed

React 19 removed the deprecated findDOMNode API.

Fix: Access DOM elements directly from refs rather than using findDOMNode.

---

Build Fixes

Error: TS2578: Unused '@ts-expect-error' directive

• Cause: React 19 types fixed the type inference for React.cloneElement()
• Fix: Removed the @ts-expect-error comment
• Files:
  • packages/noodl-core-ui/src/components/layout/Columns/Columns.tsx
  • packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx

Error: TS2554: Expected 1 arguments, but got 0 (useRef)

• Cause: React 19's types require an initial value for useRef()
• Fix: Added type parameter and null initial value: useRef<HTMLDivElement>(null)
• Files:
  • packages/noodl-core-ui/src/components/app/SideNavigation/SideNavigation.tsx
  • packages/noodl-core-ui/src/components/popups/ContextMenu/ContextMenu.tsx

Error: TS2322: RefObject not assignable to RefObject

• Cause: Untyped useRef() returns RefObject<unknown>
• Fix: Same as above - add explicit type parameter
• Files: Same as above

Error: TS2305: Module 'react' has no exported member 'ReactFragment'

• Cause: ReactFragment was removed in React 19
• Fix: Replaced with Iterable<React.ReactNode>
• File: packages/noodl-viewer-react/src/types.ts

Error: TS2503: Cannot find namespace 'JSX'

• Cause: JSX is no longer a global namespace in React 19
• Fix: Changed JSX.IntrinsicElements to React.JSX.IntrinsicElements
• Files:
  • packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
  • packages/noodl-viewer-react/src/components/visual/Text/Text.tsx

Error: TS2339: Property 'children' does not exist on type

• Cause: React 19 no longer implicitly includes children in props
• Fix: Added children?: React.ReactNode to component interfaces
• Files:
  • packages/noodl-viewer-react/src/components/visual/Drag/Drag.tsx
  • packages/noodl-viewer-react/src/components/visual/Group/Group.tsx

Error: Property 'findDOMNode' does not exist on ReactDOM

• Cause: findDOMNode removed from React 19
• Fix: Access DOM element directly from ref instead of using findDOMNode
• File: packages/noodl-viewer-react/src/components/visual/Group/Group.tsx

---

Files Modified

• packages/noodl-core-ui/src/components/layout/Columns/Columns.tsx
• packages/noodl-core-ui/src/components/app/SideNavigation/SideNavigation.tsx
• packages/noodl-core-ui/src/components/popups/ContextMenu/ContextMenu.tsx
• packages/noodl-viewer-react/src/types.ts
• packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx
• packages/noodl-viewer-react/src/components/visual/Drag/Drag.tsx
• packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
• packages/noodl-viewer-react/src/components/visual/Text/Text.tsx

---

Files Created

• None

---

Files Deleted

• None

---

Breaking Changes

• React 19 requires Node.js 18+ (documented in root package.json engines)
• findDOMNode usage removed - code now accesses refs directly

---

Testing Notes

Automated Tests

• npm run dev: PASS - All three packages (Editor, Viewer, Cloud) compile successfully

Manual Tests

• Dev server start: PASS - Editor launches, Viewer compiles, Cloud compiles

---

Known Issues

1. Deprecation warnings for Sass legacy JS API - Non-blocking, can be addressed in future task
2. Deprecation warning for Buffer() - Non-blocking, comes from dependency

---

Follow-up Tasks

1. Consider updating Sass configuration to use modern API - Future task
2. Review scrollToElement functionality to ensure it works correctly with the new ref-based approach - Manual testing needed

---

Final Summary

Total files modified: 8 Build status: All packages compiling successfully (was 95 errors, now 0) Confidence: 8/10 (code compiles, but manual testing of scrollToElement functionality recommended)