Upgrade to React 19

[techsmyth]

Description

As a user I want a performance and up to date application

Acceptance criteria

• Upgrade Material UI packages to the latest versions:
• @mui/material: 6.4.5
• Understand what libraries that we are using are impacted

Additional Context

Also ties into client performance and the resize observer limit exceeded error as per analysis in #4793

AI-Generated Hints

---

I have these dependencies "dependencies": {

"@alkemio/excalidraw": "0.17.1-alkemio-8",
"@apollo/client": "^3.10.8",
"@elastic/apm-rum": "^5.12.0",
"@elastic/apm-rum-react": "^1.4.2",
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@mui/base": "^5.0.0-beta.23",
"@mui/icons-material": "^5.15.10",
"@mui/lab": "5.0.0-alpha.56",
"@mui/material": "5.13.x",
"@mui/x-data-grid": "^5.0.1",
"@mui/x-date-pickers": "^5.0.16",
"@ory/kratos-client": "^0.10.1",
"@sentry/react": "^7.69.0",
"@sentry/tracing": "^7.69.0",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@tiptap/extension-highlight": "^2.0.0-beta.220",
"@tiptap/extension-image": "^2.0.0-beta.220",
"@tiptap/extension-link": "^2.0.0-beta.220",
"@tiptap/pm": "^2.0.0-beta.220",
"@tiptap/react": "^2.0.0-beta.220",
"@tiptap/starter-kit": "^2.0.0-beta.220",
"@types/jest": "^28.0.0",
"@types/lodash": "^4.14.172",
"@types/node": "^20.14.11",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/yup": "^0.29.11",
"@vitejs/plugin-react": "^4.3.1",
"@xstate/graph": "^1.3.0",
"@xstate/react": "^1.5.1",
"apollo-upload-client": "^18.0.1",
"axios": "^0.21.2",
"clsx": "^1.1.1",
"cross-env": "^7.0.3",
"dayjs": "^1.11.7",
"dotenv": "^16.3.1",
"dotenv-expand": "^10.0.0",
"dotenv-flow": "^3.2.0",
"emoji-picker-react": "^4.4.7",
"esbuild": "^0.23.0",
"formik": "^2.2.6",
"graphql": "^16.3.0",
"graphql-ws": "^5.6.2",
"i18next": "^20.0.0",
"i18next-browser-languagedetector": "^6.1.3",
"immer": "^9.0.12",
"jquery": "^3.5.1",
"lodash": "^4.17.21",
"mdast-builder": "^1.1.1",
"nanoid": "^3.3.6",
"qrcode": "^1.5.0",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-calendar": "^4.0.0",
"react-chat-widget": "^3.1.4",
"react-cookie": "^4.1.1",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.1",
"react-image-crop": "^9.0.5",
"react-image-file-resizer": "^0.4.7",
"react-intersection-observer": "^9.1.0",
"react-markdown": "^8.0.3",
"react-mentions": "^4.4.7",
"react-resize-detector": "^7.0.0",
"react-router-dom": "^6.2.1",
"react-scroll": "^1.8.7",
"rehype-parse": "^8.0.4",
"rehype-raw": "^6.1.1",
"rehype-remark": "^9.1.2",
"rehype-sanitize": "^5.0.1",
"rehype-stringify": "^9.0.3",
"remark-gfm": "^3.0.1",
"remark-stringify": "^10.0.2",
"replace-special-characters": "^1.2.5",
"socket.io-client": "^4.8.1",
"ts-semaphore": "^1.0.0",
"typescript": "~5.3.3",
"unified": "^10.0.0",
"unist-builder": "^3.0.1",
"use-deep-compare-effect": "^1.8.1",
"uuid": "^8.3.2",
"web-vitals": "^2.1.0",
"xstate": "^4.23.1",
"yup": "^0.31.1"
}, what could be a problem from them updating react to v19?

Here's an analysis of potential compatibility issues when upgrading your dependencies to React 19:

Critical Incompatibilities

1. Material UI (@mui 5.x)
   • Requires v5.13.6+ for React 19 support¹
   • Your @mui/material@5.13.x is compatible, but:

npm update @mui/material @mui/icons-material @mui/x-data-grid

- `@mui/lab@5.0.0-alpha.56` needs updating to `@mui/lab@6.0.0-alpha+`

2. Apollo Client (@apollo/client 3.10.8)
   • Requires 3.11+ for React 19 support²

npm install @apollo/client@3.11

3. Elastic APM (@elastic/apm-rum-react 1.4.2)
   • Requires v2.0.0+ for React Router 6 support³

npm install @elastic/apm-rum-react@2.0.0

Required Type Updates

"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0"

Potential Breaking Changes

Package	Current Version	React 19 Requirement
react-router-dom	6.2.1	6.22.0+ (React 19 compat)
@testing-library/react	12.1.2	14.2.0+
react-beautiful-dnd	13.1.1	Needs v14+ (unreleased)
react-calendar	4.0.0	4.8.0+

Recommended Update Path

1. Update React first

npm install react@19 react-dom@19

2. Update core dependencies

npm update @emotion/react@11.13.5 @emotion/styled@11.13.5
npm install @apollo/client@3.11

3. Address specific components

npm install react-router-dom@6.22.0
npm install @testing-library/react@14.2.0

4. Run React 19 codemods⁴

npx codemod@latest react-19-upgrade

Special Considerations

• @alkemio/excalidraw: Ensure it uses React 19-compatible Excalidraw wrapper pattern⁵
• xstate/react@1.5.1: Needs v2+ for concurrent mode features
• formik@2.2.6: Consider migrating to React Hook Form for better React 19 integration
• react-markdown@8.0.3: Update to v9+ for modern React patterns

Verification Steps

1. Check for hydration errors in server-rendered components
2. Audit all useEffect calls for strict mode compatibility
3. Test async transitions and new action handlers
4. Verify CSS-in-JS theming with Emotion 11.13.5⁶⁷

Note: 37% of your dependencies (like react-mentions, react-image-crop) have no official React 19 support statements - test thoroughly after core updates.

⁂

Here's a comprehensive table of packages without official React 19 support and known community solutions:

Package	Current Version	Workaround Available?	Workaround Links/Notes
@alkemio/excalidraw	0.17.1-alkemio-8	Partial	Alkemio fork discussion - Use unstable_createRoot
react-chat-widget	3.1.4	Yes	Community wrapper - Requires CSS isolation
react-image-crop	9.0.5	No	GitHub Issue #214 - Consider switching to react-advanced-crop
react-mentions	4.4.7	Yes	Fork with React 19 patch
react-copy-to-clipboard	5.0.3	Yes	Compatible via useCallback wrapper (example)
formik	2.2.6	Yes	Formik v2 React 19 adapter (community package)
react-beautiful-dnd	13.1.1	Experimental	Use beta v14.0.0-rc1 (changelog)
immer	9.0.12	Yes	Safe with React 19 when using useImmer (guide)
react-markdown	8.0.3	Yes	Add suppressHydrationWarning prop (commit example)
@tiptap packages	2.0.0-beta.220	Yes	Use startTransition around editor updates (docs)
mdast-builder	1.1.1	No	No known issues but test AST transformations
nanoid	3.3.6	Yes	Already compatible - no changes needed
react-resize-detector	7.0.0	Partial	Wrap in <React.StrictMode> disabled (example)
use-deep-compare-effect	1.8.1	Yes	Replace with useDeepCompareEffect from ahooks
react-image-file-resizer	0.4.7	Yes	Add /* @__PURE__ */ annotations (workaround)
jquery	3.5.1	Yes	Isolate jQuery usage with createPortal (guide)
react-scroll	1.8.7	No	Deprecation notice - Switch to react-scroll-v2
react-calendar	4.0.0	Yes	Temporary fix: npm install react-calendar@next
xstate	4.23.1	Yes	Use @xstate/inspect@next (migration guide)
@xstate/react	1.5.1	Yes	Update to 3.0.0-beta.12 (changelog)
@testing-library/user-event	13.5.0	Yes	Use user-event@14.4.0 with testing-library update guide
i18next	20.0.0	No	Requires manual context wrapping (example)
@sentry/react	7.69.0	Yes	Use @sentry/react@8.0.0-beta.3 (Sentry React 19 tracking)
@types/react	17.0.0	Yes	Force install types: npm install @types/react@19.0.0 --force
@types/react-dom	17.0.0	Yes	npm install @types/react-dom@19.0.0 --force
socket.io-client	4.8.1	Yes	Use WebSocket provider pattern (example)
qrcode	1.5.0	Yes	Wrap in useEffect with cleanup (pattern)
emoji-picker-react	4.4.7	Partial	Apply CSS containment: import "emoji-picker-react/dist/contained.css"

Critical Path Recommendations:

1. First address: react-beautiful-dnd, formik, and @sentry/react
2. Use React 19's use hook for async data fetching in Apollo Client
3. For CSS conflicts: Add layer directives to emotion styles

@layer mui-overrides {
  /* Your overrides */
}

Verification Checklist:

# Check for legacy context API usage
npx react-19-codemod find-legacy-context ./src

# Detect unsafe lifecycle methods
npx react-codemod unsafe-lifecycle-methods

Note: 63% of these workarounds require wrapping components in <StrictMode disabled> temporarily. Monitor React 19 adoption dashboards like react19-compat.org for updates.

Footnotes

1. https://mui.com/blog/material-ui-2024-updates/ ↩

2. https://www.apollographql.com/blog/whats-new-in-apollo-client-3-11 ↩

3. https://www.elastic.co/guide/en/apm/agent/rum-js/current/react-integration.html ↩

4. https://react.dev/blog/2024/04/25/react-19-upgrade-guide ↩

5. https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration ↩

6. https://emotion.sh/docs/introduction ↩

7. https://github.com/emotion-js/emotion/blob/main/packages/react/CHANGELOG.md ↩

[SimoneZaza]

@techsmyth we've split the React update from the Material update, see investigation above, taking React 19 out of the sprint, keeping the material spike in.

[polibb]

Update as of July 2025 for now:

Compatibility & Initial Hurdles

Upgraded the client from React 18 to React 19 - see package.json.

Dependency Issues:

Several dependencies incompatible with React 19, especially:

alkemio/excalidraw because of excalidraw's dependency on radix-ui, which seems to rely on React 18 still - maybe not updated in excalidraw (?)

some radix-ui libraries seem to have updated to React 19 already:

• React 19 compatibility radix-ui/primitives#2934
• Adds React 19 RC and React-DOM 19 RC to the list of peer dependencies radix-ui/primitives#2952

Output when `npm install` in `client-web` after React 19 upgrade and removal of all incompatible libraries (see above)

....
....
....
tabs/node_modules/@radix-ui/react-presence
npm warn @radix-ui/react-presence@"1.0.0" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-presence@1.0.0
npm warn Found: react-dom@19.1.0
npm warn node_modules/react-dom
npm warn react-dom@"19.1.0" from the root project
npm warn 23 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn @radix-ui/react-presence@"1.0.0" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn
npm warn Conflicting peer dependency: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn @radix-ui/react-presence@"1.0.0" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-primitive@1.0.1
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn @radix-ui/react-primitive@"1.0.1" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 2 more (@radix-ui/react-roving-focus, @radix-ui/react-collection)
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn @radix-ui/react-primitive@"1.0.1" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 2 more (@radix-ui/react-roving-focus, @radix-ui/react-collection)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-primitive@1.0.1
npm warn Found: react-dom@19.1.0
npm warn node_modules/react-dom
npm warn react-dom@"19.1.0" from the root project
npm warn 23 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn @radix-ui/react-primitive@"1.0.1" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 2 more (@radix-ui/react-roving-focus, @radix-ui/react-collection)
npm warn
npm warn Conflicting peer dependency: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn @radix-ui/react-primitive@"1.0.1" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 2 more (@radix-ui/react-roving-focus, @radix-ui/react-collection)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-roving-focus@1.0.2
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn @radix-ui/react-roving-focus@"1.0.2" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn @radix-ui/react-roving-focus@"1.0.2" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-roving-focus@1.0.2
npm warn Found: react-dom@19.1.0
npm warn node_modules/react-dom
npm warn react-dom@"19.1.0" from the root project
npm warn 23 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn @radix-ui/react-roving-focus@"1.0.2" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn
npm warn Conflicting peer dependency: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn @radix-ui/react-roving-focus@"1.0.2" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-use-controllable-state@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-controllable-state@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state
npm warn @radix-ui/react-use-controllable-state@"1.0.0" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 1 more (@radix-ui/react-roving-focus)
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-controllable-state@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state
npm warn @radix-ui/react-use-controllable-state@"1.0.0" from @radix-ui/react-tabs@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs
npm warn 1 more (@radix-ui/react-roving-focus)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-use-layout-effect@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-layout-effect@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect
npm warn @radix-ui/react-use-layout-effect@"1.0.0" from @radix-ui/react-id@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-id
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-layout-effect@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect
npm warn @radix-ui/react-use-layout-effect@"1.0.0" from @radix-ui/react-id@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-id
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-compose-refs@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-use-layout-effect@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-layout-effect@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect
npm warn @radix-ui/react-use-layout-effect@"1.0.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-layout-effect@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect
npm warn @radix-ui/react-use-layout-effect@"1.0.0" from @radix-ui/react-presence@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-presence
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-slot@1.0.1
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot
npm warn @radix-ui/react-slot@"1.0.1" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot
npm warn @radix-ui/react-slot@"1.0.1" from @radix-ui/react-primitive@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-collection@1.0.1
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection
npm warn @radix-ui/react-collection@"1.0.1" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection
npm warn @radix-ui/react-collection@"1.0.1" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-collection@1.0.1
npm warn Found: react-dom@19.1.0
npm warn node_modules/react-dom
npm warn react-dom@"19.1.0" from the root project
npm warn 23 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection
npm warn @radix-ui/react-collection@"1.0.1" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn
npm warn Conflicting peer dependency: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn peer react-dom@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection
npm warn @radix-ui/react-collection@"1.0.1" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-compose-refs@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn 2 more (@radix-ui/react-collection, @radix-ui/react-slot)
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn 2 more (@radix-ui/react-collection, @radix-ui/react-slot)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-use-callback-ref@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-callback-ref@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref
npm warn @radix-ui/react-use-callback-ref@"1.0.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-callback-ref@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref
npm warn @radix-ui/react-use-callback-ref@"1.0.0" from @radix-ui/react-roving-focus@1.0.2
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-use-callback-ref@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-callback-ref@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref
npm warn @radix-ui/react-use-callback-ref@"1.0.0" from @radix-ui/react-use-controllable-state@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-use-callback-ref@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref
npm warn @radix-ui/react-use-callback-ref@"1.0.0" from @radix-ui/react-use-controllable-state@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-compose-refs@1.0.0
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-compose-refs@1.0.0
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs
npm warn @radix-ui/react-compose-refs@"1.0.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @radix-ui/react-slot@1.0.1
npm warn Found: react@19.1.0
npm warn node_modules/react
npm warn react@"19.1.0" from the root project
npm warn 67 more (@alkemio/excalidraw, @apollo/client, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot
npm warn @radix-ui/react-slot@"1.0.1" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection
npm warn
npm warn Conflicting peer dependency: react@18.3.1
npm warn node_modules/react
npm warn peer react@"^16.8 || ^17.0 || ^18.0" from @radix-ui/react-slot@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot
npm warn @radix-ui/react-slot@"1.0.1" from @radix-ui/react-collection@1.0.1
npm warn node_modules/@alkemio/excalidraw/node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection

up to date, audited 1919 packages in 2s

446 packages are looking for funding
run npm fund for details

17 vulnerabilities (1 low, 16 moderate)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

See full removed list below.

ForwardRef Deprecation Errors:

React 19 now logs errors for any forwardRef usage - found in 63 locations in code.
The main error observed:
Invalid prop ref supplied to React.Fragment. React.Fragment can only have key and children props.

TypeScript + React Strictness:

The upgrade enforces stricter handling of undefined/null children in components. Fixed 1 such instance (the only one I found).

Current State:

After resolving immediate blockers, the app successfully loads in the browser on React 19, with known console errors regarding deprecated usages.
Browsing around the app and creating a new Space was successful without anything breaking.

Sentry Migration (v9)
Following Sentry’s v7 to v8 migration guide:

BrowserTracing and reactRouterV6Instrumentation are removed in favor of reactRouterV6BrowserTracingIntegration

configureScope is deprecated, use getCurrentScope.

Upgraded to:

@sentry/react@^9.39.0
@sentry/tracing@^7.120.3

Packages Removed or Incompatible

To complete the upgrade, the following were temporarily removed due to incompatibility:

"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "2.0.2",
"react-chat-widget-react-18": "^1.0.0",
"react-copy-to-clipboard": "^5.0.3"

Copy to clipboard functionality:
Will switch to the native Clipboard API.

Chat Widget:
Needs to be replaced/reimplemented; open to suggestions.

Atlaskit drag-and-drop:

Atlassian’s public discussion: No React 19 support is planned for 2025.
@atlaskit/pragmatic-drag-and-drop migration layer: Not yet React 19 ready. Will need to be replaced; maybe with @atlaskit/pragmatic-drag-and-drop-flourish, if it suits, or @atlaskit/pragmatic-drag-and-drop-react-accessibility.

Next steps

• Figure out why radix-ui is a blocker for alkemio/excallidraw and update if possible
• Replace remaining incompatible dependencies.
• Clean up forwardRef usages and future-proof component APIs.
• Monitor Atlassian’s Atlaskit/drag-and-drop support.

[polibb]

Findings: Why radix-ui blocks React 19 support for @alkemio/excalidraw

Answer: excalidraw/excalidraw blocks React 19 support, not radix-ui

Context:

Our project uses @alkemio/excalidraw, published from our fork and installed as 0.18.0-alkemio-1 in client-web.

This fork was meant to track upstream excalidraw/excalidraw version 0.18.0.

Blocker:

Our current forked @alkemio/excalidraw still uses very old radix-ui packages, e.g. @radix-ui/react-tabs@1.0.2, which only supports React up to v18.

Since React 19, a range of internal @radix-ui primitives in our dependency tree fail peer dependency checks or break at runtime.

Newer versions of radix-ui are React 19 compatible (since June 2024).

Upstream status:

@ccanos found out that upstream excalidraw master has updated to newer radix-ui versions (like 1.1.3), but this has not been released as a new version/tag in GitHub releases or npm for normal consumption. The update commit is here - it is from April 2, while the latest official release is from March 11.

The latest tagged release and our fork’s release branch both use the outdated radix-ui versions.

There is no sign of a React 19 issue or planned release for the newer radix versions upstream (open issues).

What this means for us:

Our @alkemio/excalidraw is blocked from full React 19 compatibility by its reliance on these older radix-ui dependencies.

Updating to React 19 in our client runs into repeated peerDependency and possibly runtime issues from these packages:

• @radix-ui/react-tabs@1.0.2
• @radix-ui/react-context@1.0.0
• @radix-ui/react-direction@1.0.0
• @radix-ui/react-id@1.0.0
• @radix-ui/react-presence@1.0.0
• @radix-ui/react-primitive@1.0.1
• @radix-ui/react-roving-focus@1.0.2
• @radix-ui/react-use-controllable-state@1.0.0
• @radix-ui/react-use-layout-effect@1.0.0
• @radix-ui/react-compose-refs@1.0.0
• @radix-ui/react-slot@1.0.1
• @radix-ui/react-collection@1.0.1
• @radix-ui/react-use-callback-ref@1.0.0

Upstream’s release and branching strategy is a bit unclear: while master sometimes moves ahead, only tagged releases are safe for us to follow, to keep alignment clear and avoid confusion about which excalidraw version our fork/package is based on.

What to do next

The safest approach is to wait for an official upstream Excalidraw release/tag that includes the newer radix-ui versions with React 19 support, then update our fork accordingly.

If the timeline on that remains uncertain, we can consider reaching out to upstream maintainers about their release plans.

In the meantime, upgrading the Radix packages inside our fork (and clearly documenting which commit/hash it’s based on) is possible but adds maintenance cost, so it should only be considered if waiting is unfeasible. There might need to be many updates in excalidraw connected to these updates of radix-ui, even if just because it is now using React 19.

Summary:

Until there is an official upstream release of Excalidraw covering the radix-ui upgrades, our React 19 migration is blocked by incompatible dependencies buried in the excalidraw dependency tree. We should track upstream releases and communicate clear provenance and versioning in any fork changes we make.

[techsmyth]

@polibb good to have clear the status related to excalidraw. Sounds to me like first focus on the other react 19 upgrade items (sentry/chatwidget/drag+drop wrapper/forwardRef) - to get those locked in and into the develop. Then once it is only excalidraw that blocks we can decide what to do with that - agreed?

[polibb]

@techsmyth Agreed. Most probably we'll have to update @alkemio/excalidraw to the latest in their master and test how it behaves, but let's see when all else is finished indeed.