Skip to content

Objective: React 19 Upgrade Implementation #3665

New issue
New issue
Open
Objective
2 of 4 issues completed
Open
Objective: React 19 Upgrade Implementation#3665
Objective
2 of 4 issues completed
Milestone
2025-Q4
@odinr

Description

@odinr
odinr
opened on Oct 29, 2025

Implementation Plan: React 19 Upgrade

Issue Type: Objective / Implementation Plan
Priority: High
Related Issues:

Objective

Execute the React 19 upgrade for Fusion Framework based on the comprehensive research analysis. This plan breaks down the implementation into phases and specific tasks required to successfully upgrade from React 18.2.0 to React 19.0.0.

Research Status: ✅ Complete - See #3664

Implementation Overview

Estimated Timeline: 2-3 weeks (10-15 days)
Upgrade Difficulty: MEDIUM
Risk Level: MEDIUM (manageable with proper testing)

Summary of Work

  • 49 packages require dependency updates
  • 1 critical file needs code migration (ReactDOM.render → createRoot)
  • 8 test files need testing library migration
  • 13 packages require peer dependency updates
  • Dependency verification needed for React Router 5, AG Grid, and external packages

Phase 1: Dependency Verification & Preparation

Duration: 1-2 days

Tasks

  1. Verify React Router 5 Compatibility
    • Check React Router 5 GitHub issues/changelog for React 19 compatibility
    • Test legacy-interopt package with React 19
    • Determine if upgrade to Router 6 is required
    • Document findings and decision
  2. Verify AG Grid Compatibility
    • Check AG Grid 34.2.0 changelog/release notes for React 19 support
    • Check AG Grid 35+ changelog for React 19 compatibility
    • Determine if AG Grid version upgrade is needed
    • Test AG Grid components if upgrade required
  3. Verify styled-components Compatibility
    • Verify [email protected] React 19 compatibility
    • Check peer dependency warnings
    • Test styled components functionality if needed
  4. Verify External Fusion Packages
    • Verify @equinor/fusion-* packages support React 19
    • Check for available updates
    • Coordinate with package maintainers if updates needed
    • Document dependencies on external packages

Deliverable: Verified compatibility matrix, documented decisions

Phase 2: Critical Code Fixes

Duration: 0.5-1 day

Tasks

  1. Run React 19 Codemods (Optional but Recommended)
    • Run npx react-codemod@latest react/19/migration-recipe
    • Run npx types-react-codemod@latest preset-19 ./packages for TypeScript files
    • Review and test codemod changes
    • Commit codemod changes
  2. Migrate ReactDOM.render() to createRoot()
    • File: packages/react/app/src/render-component.tsx
    • Uncomment existing createRoot() implementation
    • Remove deprecated ReactDOM.render() and unmountComponentAtNode() code
    • Add import: import { createRoot } from 'react-dom/client';
    • Test application rendering thoroughly
    • Commit changes
  3. Migrate Testing Libraries
    • Files: 8 test files in packages/utils/observable/src/__tests__/
    • Update imports from @testing-library/react-hooks to @testing-library/react
    • Verify all tests pass after migration
    • Remove @testing-library/react-hooks dependency if present
    • Commit changes

Deliverable: All critical breaking changes resolved, code ready for React 19

Phase 3: Dependency Updates

Duration: 1-2 days

Tasks

  1. Update React Core Dependencies
    • Update all react to ^19.0.0 (49 package.json files)
    • Update all react-dom to ^19.0.0 (49 package.json files)
    • Update all @types/react to ^19.0.0
    • Update all @types/react-dom to ^19.0.0
    • Update systematically across all packages
  2. Update Peer Dependencies
  3. Verify Dependency Resolution
    • Run pnpm install and verify no conflicts
    • Check for peer dependency warnings
    • Resolve any dependency resolution issues
    • Test build process

Deliverable: All packages updated to React 19, dependencies resolved

Phase 4: Compatibility Verification & Fixes

Duration: 2-3 days

Tasks

  1. Verify and Fix Dependency Issues
    • Test React Router functionality (all versions: 5, 6, 7)
    • Test AG Grid functionality
    • Test styled-components functionality
    • Test external Fusion packages integration
    • Document any compatibility issues
  2. Address Compatibility Problems
    • Upgrade packages if incompatible versions found (e.g., AG Grid 35+)
    • Consider React Router 6 upgrade for legacy-interopt if Router 5 incompatible
    • Document workarounds if needed
    • Test fixes thoroughly
  3. Update Dependencies as Needed
    • Install updated package versions
    • Verify functionality after updates
    • Update documentation

Deliverable: All dependencies compatible and verified

Phase 5: Testing

Duration: 3-5 days

Tasks

  1. Unit Testing
    • Run full test suite: pnpm test
    • Fix any test failures from React 19 upgrade
    • Verify all unit tests pass
    • Document any test changes required
  2. Integration Testing
    • Test all cookbooks (21 cookbooks)
    • Test dev-portal application
    • Test legacy-interopt package
    • Test AG Grid features comprehensively
    • Verify all modules function correctly
  3. Manual Testing
    • Smoke test critical user flows
    • Test application rendering
    • Test error scenarios and error boundaries
    • Verify no console warnings related to deprecated APIs
  4. Performance Testing
    • Benchmark performance metrics
    • Verify no performance regressions
    • Assess bundle size impact
    • Document performance findings

Deliverable: All tests passing, functionality verified, no regressions

Phase 6: Documentation & Cleanup

Duration: 1 day

Tasks

  1. Update Documentation
    • Update CHANGELOG files for affected packages
    • Update README files if needed
    • Update TypeScript documentation if types changed
  2. Create Migration Guide
    • Document breaking changes for consumers
    • Provide upgrade instructions from React 18 to 19
    • Include code examples and migration patterns
    • Reference React 19 upgrade guide
  3. Cleanup

Deliverable: Complete documentation, migration guide available

Phase 7: Release Preparation

Duration: 1 day

Tasks

  1. Create Changesets
    • Create changeset for breaking changes (major version)
    • Document all changes per package
    • Include migration notes
  2. Final Review
    • Code review of all changes
    • Verify all acceptance criteria met
    • Confirm no breaking changes to public APIs (except React version)
  3. Prepare Release
    • Prepare release notes
    • Coordinate with teams
    • Plan release timeline

Pre-Merge Checklist

⚠️ Before merging react-19 branch into main:

  • Exit pre-release mode
    • Run: pnpm changeset pre exit
    • Verify changesets are ready for stable release
    • Purpose: Ensures changesets are in normal mode for main branch release
  • Create backup tag for stable React 18 state
    • Switch to main branch: git checkout main
    • Create tag: git tag react-18-stable-backup
    • Push tag: git push origin react-18-stable-backup
    • Verify tag: git show react-18-stable-backup
    • Purpose: Safety net to revert to React 18 if critical issues are discovered post-merge

Deliverable: Ready for release

Success Criteria

Technical Success

  • All packages compile without errors
  • All tests pass with React 19
  • No deprecated API usage
  • All cookbooks functional
  • No breaking changes to public APIs (except React version)

Functional Success

  • Framework initializes correctly with React 19
  • All modules work with React 19
  • Application rendering works correctly
  • No console warnings related to React 19
  • Performance maintained or improved

Documentation Success

  • Migration guide available
  • CHANGELOG files updated
  • Release notes prepared
  • Teams notified

Risk Mitigation

High-Risk Areas

  1. ReactDOM.render() Migration
    • Mitigation: Code already exists, thorough testing required
    • Testing: Comprehensive rendering tests
  2. React Router 5 Compatibility
    • Mitigation: Verify early in Phase 1, consider Router 6 upgrade if needed
    • Testing: Legacy app compatibility tests
  3. AG Grid Compatibility
    • Mitigation: Verify compatibility, may require version upgrade
    • Testing: All AG Grid features

Dependencies & Blockers

External Dependencies

  • React 19 stable release (available)
  • Third-party library compatibility (to be verified in Phase 1)
  • External @equinor/fusion-* package updates (coordination may be needed)

Potential Blockers

  • External packages not compatible (mitigated by Phase 1 verification)
  • AG Grid requiring major version upgrade (mitigated by early verification)
  • React Router 5 incompatibility (mitigated by Router 6 upgrade option)

Timeline Summary

Phase Duration Key Deliverable
Phase 1: Verification 1-2 days Compatibility decisions
Phase 2: Critical Fixes 0.5-1 day Code migrations complete
Phase 3: Dependencies 1-2 days All packages updated
Phase 4: Compatibility 2-3 days Issues resolved
Phase 5: Testing 3-5 days All tests passing
Phase 6: Documentation 1 day Migration guide ready
Phase 7: Release 1 day Ready for release
Total 10-15 days React 19 upgrade complete

Notes

  • All phases should have thorough testing before proceeding to next phase
  • Document decisions and issues encountered during implementation
  • Coordinate with external package maintainers early if needed
  • Maintain backward compatibility with React 18 during transition period

References

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Objective

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions