OpenNoodl/dev-docs/tasks/phase-1/TASK-001B-react19-migration/CHANGELOG.md

TASK-001B Changelog: React 19 Migration Completion

---

[2025-07-12] - Session 4: Complete Source Code Fixes ✅

Summary

Completed all React 19 source code TypeScript errors. All errors now resolved from application source files.

Result: 0 source file errors remaining (only node_modules type conflicts remain - Jest/Jasmine and algolia-helper)

Files Fixed This Session

noodl-core-ui - cloneElement and type fixes

• src/components/property-panel/PropertyPanelSliderInput/PropertyPanelSliderInput.tsx - Fixed linearMap call with Number() conversion for min/max
• src/components/inputs/Checkbox/Checkbox.tsx - Added isValidElement check and ReactElement type assertion for cloneElement
• src/components/popups/MenuDialog/MenuDialog.tsx - Added isValidElement check and ReactElement type assertion for cloneElement

noodl-editor - useRef() fixes (React 19 requires initial value argument)

• src/editor/src/views/EditorTopbar/EditorTopbar.tsx - Fixed 7 useRef calls with proper types and null initial values
• src/editor/src/views/CommentLayer/CommentForeground.tsx - Fixed colorPickerRef with HTMLDivElement type
• src/editor/src/views/documents/ComponentDiffDocument/CodeDiffDialog.tsx - Fixed codeEditorRef with HTMLDivElement type
• src/editor/src/views/HelpCenter/HelpCenter.tsx - Fixed rootRef with HTMLDivElement type + fixed algoliasearch import (liteClient named export)
• src/editor/src/views/NodeGraphComponentTrail/NodeGraphComponentTrail.tsx - Fixed itemRef with HTMLDivElement type
• src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditor.tsx - Fixed rootRef and editorRef with HTMLDivElement type

noodl-editor - Ref callback return type fixes (React 19 requires void return)

• src/editor/src/views/panels/propertyeditor/components/VariantStates/PickVariantPopup.tsx - Changed ref callback to use block syntax { if (ref) setTimeout(...); }

noodl-editor - Unused @ts-expect-error removal

• src/editor/src/views/DeployPopup/DeployPopup.tsx - Replaced @ts-expect-error with proper type assertion for overflowY: 'overlay'

Current Status

TypeScript Error Count:

• Source files: 0 errors ✅
• node_modules (pre-existing conflicts): 33 errors (Jest/Jasmine type conflicts, algolia-helper types)

Webpack Build: ✅ Compiles successfully

---

[2025-07-12] - Session 3: ReactChild Fixes and Partial ReactDOM Migration

Summary

Continued fixing React 19 migration issues. Fixed ReactChild import issues and made progress on remaining ReactDOM migrations.

Files Fixed This Session

noodl-editor - ReactChild imports

• src/editor/src/views/NodePicker/components/NodePickerCategory/NodePickerCategory.tsx - Removed unused ReactChild import
• src/editor/src/views/NodePicker/components/NodePickerSection/NodePickerSection.tsx - Removed unused ReactChild import
• src/editor/src/views/NodePicker/components/NodePickerSubCategory/NodePickerSubCategory.tsx - Changed ReactChild to ReactNode
• src/editor/src/views/SidePanel/SidePanel.tsx - Changed React.ReactChild to React.ReactElement

noodl-editor - ref callbacks (partial)

• src/editor/src/views/panels/propertyeditor/components/QueryEditor/QueryGroup/QueryGroup.tsx - Fixed via sed
• src/editor/src/views/panels/propertyeditor/components/QueryEditor/QuerySortingEditor/QuerySortingEditor.tsx - Fixed via sed

noodl-editor - ReactDOM migrations (attempted)

Several files were edited but may need re-verification:

• src/editor/src/views/panels/propertyeditor/DataTypes/TextStyleType.ts
• src/editor/src/views/panels/propertyeditor/DataTypes/ColorPicker/ColorType.ts
• src/editor/src/views/panels/propertyeditor/components/QueryEditor/utils.ts
• src/editor/src/views/panels/propertyeditor/Pages/Pages.tsx
• src/editor/src/views/panels/propertyeditor/Pages/PagesType.tsx
• src/editor/src/views/panels/propertyeditor/components/VariantStates/variantseditor.tsx
• src/editor/src/views/panels/propertyeditor/components/VisualStates/visualstates.tsx

---

[2025-07-12] - Session 2: Continued ReactDOM Migration

Summary

Continued fixing ReactDOM.render/unmountComponentAtNode migrations. Made significant progress on noodl-editor files.

Files Fixed This Session

noodl-editor - ReactDOM.render → createRoot

• src/editor/src/views/VisualCanvas/ShowInspectMenu.tsx
• src/editor/src/views/panels/propertyeditor/propertyeditor.ts
• src/editor/src/views/panels/propertyeditor/componentpicker.ts
• src/editor/src/views/panels/componentspanel/ComponentTemplates.ts
• src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditorType.ts
• src/editor/src/views/createnewnodepanel.ts
• src/editor/src/views/panels/propertyeditor/DataTypes/IconType.ts
• src/editor/src/views/panels/propertyeditor/DataTypes/QueryFilterType.ts
• src/editor/src/views/panels/propertyeditor/DataTypes/QuerySortingType.ts
• src/editor/src/views/panels/propertyeditor/DataTypes/CurveEditor/CurveType.ts
• src/editor/src/views/lessonlayer2.ts

---

[2025-07-12] - Session 1: Initial Fixes

Summary

Started fixing the 90 TypeScript errors related to React 19 migration. Made significant progress on noodl-core-ui and started on noodl-editor.

Files Fixed

noodl-core-ui

• src/types/global.ts - Removed ReactChild, ReactFragment, ReactText imports (replaced with React.ReactNode equivalents)
• src/components/layout/Columns/Columns.tsx - Added React.isValidElement check before cloneElement
• src/components/layout/BaseDialog/BaseDialog.tsx - Fixed useRef() to include null initial value
• src/components/layout/Carousel/Carousel.tsx - Fixed ref callback to return void
• src/components/property-panel/PropertyPanelSelectInput/PropertyPanelSelectInput.tsx - Fixed useRef()
• src/components/popups/PopupSection/PopupSection.tsx - Fixed useRef() and removed unused @ts-expect-error

noodl-editor

• src/shared/ReactView.ts - Migrated from ReactDOM.render to createRoot API
• src/editor/src/views/VisualCanvas/CanvasView.ts - Migrated from ReactDOM.render to createRoot API

---

Migration Patterns Reference

Pattern 1: ReactDOM.render → createRoot

// OLD (React 17)
import ReactDOM from 'react-dom';
ReactDOM.render(<Component />, container);

// NEW (React 18+)
import { createRoot, Root } from 'react-dom/client';
private root: Root | null = null;

// In render method:
if (!this.root) {
  this.root = createRoot(container);
}
this.root.render(<Component />);

Pattern 2: unmountComponentAtNode → root.unmount

// OLD
ReactDOM.unmountComponentAtNode(container);

// NEW
if (this.root) {
  this.root.unmount();
  this.root = null;
}

Pattern 3: useRef with type

// OLD
const ref = useRef();

// NEW
const ref = useRef<HTMLDivElement>(null);

Pattern 4: Ref callbacks must return void

// OLD - returns Timeout or element
ref={(el) => el && setTimeout(() => el.focus(), 10)}

// NEW - returns void
ref={(el) => { if (el) setTimeout(() => el.focus(), 10); }}

Pattern 5: Removed types

// ReactChild, ReactFragment, ReactText are removed
// Use React.ReactNode instead for children
// Use Iterable<React.ReactNode> for fragments
// Use string | number for text

Pattern 6: cloneElement with type safety

// OLD - could fail with non-element children
{children && cloneElement(children, { prop })}

// NEW - validate and cast
{children && isValidElement(children) && cloneElement(children as ReactElement<Props>, { prop })}

Pattern 7: algoliasearch import change

// OLD
import algoliasearch from 'algoliasearch/lite';

// NEW
import { liteClient as algoliasearch } from 'algoliasearch/lite';

---

Final Status Summary

TASK-001B: COMPLETED ✅

• Starting errors: ~90 TypeScript errors
• Source file errors fixed: ~60+
• Source file errors remaining: 0
• node_modules type conflicts: 33 (pre-existing, unrelated to React 19)

Remaining Items (Not React 19 Related)

The 33 remaining TypeScript errors are in node_modules and are pre-existing type conflicts:

1. Jest vs Jasmine type definitions conflicts (~30 errors)
2. algoliasearch-helper type definitions (~3 errors)

These are not blocking for development or build - webpack compiles successfully.

Verified Working

• Webpack build compiles successfully
• Editor can start (npm run dev)
• No source code TypeScript errors