Bump React major version to 19 (#8989)

franknoirot · web-flow · commit 3d82b5a53547 · 2025-11-20T09:06:47.000-05:00
* Bump react major version to 19 Uh this was painless? I tried to follow https://react.dev/blog/2024/04/25/react-19-upgrade-guide and ran `npx codemod@latest react/19/migration-recipe` and no changes were needed! I want to get access to the new `use` hook. I want to see if it passes tests. * fix: tsc updates
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,8 +61,8 @@
     "ms": "^2.1.3",
     "openid-client": "^5.6.5",
     "re-resizable": "^6.11.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-hot-toast": "^2.5.2",
     "react-hotkeys-hook": "^4.6.1",
     "react-modal": "^3.16.3",
@@ -179,8 +179,8 @@
     "@types/node": "^22.14.1",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
     "@types/react-modal": "^3.16.3",
     "@types/three": "^0.175.0",
     "@types/ua-parser-js": "^0.7.39",
diff --git a/src/components/AvailableVarsHelpers.tsx b/src/components/AvailableVarsHelpers.tsx
@@ -35,7 +35,7 @@ export const AvailableVars = ({
 
 export const addToInputHelper =
   (
-    inputRef: React.RefObject<HTMLInputElement>,
+    inputRef: React.RefObject<HTMLInputElement | null>,
     setValue: (a: string) => void
   ) =>
   (varName: string) => {
diff --git a/src/components/CommandBar/CommandBarTextareaInput.tsx b/src/components/CommandBar/CommandBarTextareaInput.tsx
@@ -101,7 +101,7 @@ function CommandBarTextareaInput({
  * Modified from https://www.reddit.com/r/reactjs/comments/twmild/comment/i3jf330/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
  * Thank you to @sidkh for the original code
  */
-const useTextareaAutoGrow = (ref: RefObject<HTMLTextAreaElement>) => {
+const useTextareaAutoGrow = (ref: RefObject<HTMLTextAreaElement | null>) => {
   useEffect(() => {
     const listener = () => {
       if (ref.current === null) return
diff --git a/src/components/CommandBar/CommandBarVector2DInput.tsx b/src/components/CommandBar/CommandBarVector2DInput.tsx
@@ -23,7 +23,7 @@ function CoordinateInput({
   value: string
   onChange: (value: string) => void
   calculation: ReturnType<typeof useCalculateKclExpression>
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   testId: string
 }) {
@@ -210,7 +210,7 @@ function CommandBarVector2DInput({
 
   function handleKeyDown(
     e: React.KeyboardEvent<HTMLInputElement>,
-    nextInputRef?: React.RefObject<HTMLInputElement>
+    nextInputRef?: React.RefObject<HTMLInputElement | null>
   ) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
       commandBarActor.send({ type: 'Close' })
diff --git a/src/components/CommandBar/CommandBarVector3DInput.tsx b/src/components/CommandBar/CommandBarVector3DInput.tsx
@@ -23,7 +23,7 @@ function CoordinateInput({
   value: string
   onChange: (value: string) => void
   calculation: ReturnType<typeof useCalculateKclExpression>
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   testId: string
 }) {
@@ -232,7 +232,7 @@ function CommandBarVector3DInput({
 
   function handleKeyDown(
     e: React.KeyboardEvent<HTMLInputElement>,
-    nextInputRef?: React.RefObject<HTMLInputElement>
+    nextInputRef?: React.RefObject<HTMLInputElement | null>
   ) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
       commandBarActor.send({ type: 'Close' })
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
@@ -19,7 +19,7 @@ import { hotkeyDisplay } from '@src/lib/hotkeys'
 export interface ContextMenuProps
   extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
   items?: React.ReactElement[]
-  menuTargetElement?: RefObject<HTMLElement>
+  menuTargetElement?: RefObject<HTMLElement | null>
   guard?: (e: globalThis.MouseEvent) => boolean
   event?: 'contextmenu' | 'mouseup'
   callback?: (event: globalThis.MouseEvent) => void
diff --git a/src/components/Explorer/utils.ts b/src/components/Explorer/utils.ts
@@ -71,7 +71,7 @@ export interface FileExplorerRender extends FileExplorerRow {
 }
 
 export interface FileExplorerRowContextMenuProps {
-  itemRef: React.RefObject<HTMLElement>
+  itemRef: React.RefObject<HTMLElement | null>
   onRename: () => void
   onDelete: () => void
   onOpenInNewWindow: () => void
diff --git a/src/components/MlEphantConversation.tsx b/src/components/MlEphantConversation.tsx
@@ -95,8 +95,9 @@ export const MlEphantConversationInput = (
     if (props.disabled) return
 
     const value = refDiv.current?.value
-    if (!value) return
-    setHeightConvo(refDiv.current.getBoundingClientRect().height)
+    const boundingRect = refDiv.current?.getBoundingClientRect()
+    if (!(value && boundingRect)) return
+    setHeightConvo(boundingRect.height)
 
     props.onProcess(value)
     setLettersForAnimation(
diff --git a/src/components/Settings/KeybindingsSectionsList.tsx b/src/components/Settings/KeybindingsSectionsList.tsx
@@ -4,7 +4,7 @@ import {
 } from '@src/lib/settings/initialKeybindings'
 
 interface KeybindingSectionsListProps {
-  scrollRef: React.RefObject<HTMLDivElement>
+  scrollRef: React.RefObject<HTMLDivElement | null>
 }
 
 export function KeybindingsSectionsList({
diff --git a/src/components/Settings/SettingsSectionsList.tsx b/src/components/Settings/SettingsSectionsList.tsx
@@ -7,7 +7,7 @@ import { useSettings } from '@src/lib/singletons'
 
 interface SettingsSectionsListProps {
   searchParamTab: SettingsLevel
-  scrollRef: React.RefObject<HTMLDivElement>
+  scrollRef: React.RefObject<HTMLDivElement | null>
 }
 
 export function SettingsSectionsList({
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -31,8 +31,7 @@ export default function Tooltip({
 }: TooltipProps) {
   return (
     <div
-      // @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
-      {...{ inert: inert ? '' : undefined }}
+      inert={inert}
       role="tooltip"
       className={`p-3 ${
         position !== 'left' && position !== 'right' ? 'px-0' : ''
diff --git a/src/components/layout/areas/FeatureTreePane.tsx b/src/components/layout/areas/FeatureTreePane.tsx
@@ -421,7 +421,7 @@ const OperationItemWrapper = ({
 }: React.HTMLAttributes<HTMLButtonElement> & {
   icon: CustomIconName
   visibilityToggle?: VisibilityToggleProps
-  customSuffix?: JSX.Element
+  customSuffix?: React.JSX.Element
   menuItems?: ComponentProps<typeof ContextMenu>['items']
   errors?: Diagnostic[]
   selectable?: boolean
diff --git a/src/hooks/network/useOnPageResize.tsx b/src/hooks/network/useOnPageResize.tsx
@@ -16,9 +16,9 @@ export const useOnPageResize = ({
   videoRef,
   canvasRef,
 }: {
-  videoWrapperRef: React.RefObject<HTMLDivElement>
-  videoRef: React.RefObject<HTMLVideoElement>
-  canvasRef: React.RefObject<HTMLCanvasElement>
+  videoWrapperRef: React.RefObject<HTMLDivElement | null>
+  videoRef: React.RefObject<HTMLVideoElement | null>
+  canvasRef: React.RefObject<HTMLCanvasElement | null>
 }) => {
   const setSizeOneMoreTime = useRef<NodeJS.Timeout | null>(null)
   const last = useRef<number>(Date.now())
diff --git a/src/hooks/network/useTryConnect.tsx b/src/hooks/network/useTryConnect.tsx
@@ -29,9 +29,9 @@ const attemptToConnectToEngine = async ({
   timeToConnect,
 }: {
   authToken: string
-  videoWrapperRef: React.RefObject<HTMLDivElement>
+  videoWrapperRef: React.RefObject<HTMLDivElement | null>
   setAppState: (newAppState: Partial<ReturnType<typeof useAppState>>) => void
-  videoRef: React.RefObject<HTMLVideoElement>
+  videoRef: React.RefObject<HTMLVideoElement | null>
   setIsSceneReady: React.Dispatch<React.SetStateAction<boolean>>
   settingsEngine: SettingsViaQueryString
   timeToConnect: number
@@ -171,12 +171,12 @@ async function tryConnecting({
   settings,
   setShowManualConnect,
 }: {
-  isConnecting: React.MutableRefObject<boolean>
-  numberOfConnectionAttempts: React.MutableRefObject<number>
+  isConnecting: React.RefObject<boolean>
+  numberOfConnectionAttempts: React.RefObject<number>
   authToken: string
-  videoWrapperRef: React.RefObject<HTMLDivElement>
+  videoWrapperRef: React.RefObject<HTMLDivElement | null>
   setAppState: (newAppState: Partial<ReturnType<typeof useAppState>>) => void
-  videoRef: React.RefObject<HTMLVideoElement>
+  videoRef: React.RefObject<HTMLVideoElement | null>
   setIsSceneReady: React.Dispatch<React.SetStateAction<boolean>>
   timeToConnect: number
   settings: SettingsViaQueryString
diff --git a/src/lib/useCalculateKclExpression.ts b/src/lib/useCalculateKclExpression.ts
@@ -33,7 +33,7 @@ export function useCalculateKclExpression({
   selectionRanges: Selections
   allowArrays?: boolean
 }): {
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   valueNode: Expr | null
   calcResult: string
   prevVariables: PrevVariable<unknown>[]
diff --git a/src/routes/Onboarding/BrowserOnboardingRoutes.tsx b/src/routes/Onboarding/BrowserOnboardingRoutes.tsx
@@ -39,19 +39,21 @@ type BrowserOnboaringRoute = RouteObject & {
  *
  * Browser onboarding content is completely separate from desktop onboarding content.
  */
-const browserOnboardingComponents: Record<BrowserOnboardingPath, JSX.Element> =
-  {
-    '/browser': <Welcome />,
-    '/browser/scene': <Scene />,
-    '/browser/toolbar': <Toolbar />,
-    '/browser/text-to-cad': <TextToCad />,
-    '/browser/text-to-cad-prompt': <TextToCadPrompt />,
-    '/browser/feature-tree-pane': <FeatureTreePane />,
-    '/browser/prompt-to-edit': <PromptToEdit />,
-    '/browser/prompt-to-edit-prompt': <PromptToEditPrompt />,
-    '/browser/prompt-to-edit-result': <PromptToEditResult />,
-    '/browser/conclusion': <OnboardingConclusion />,
-  }
+const browserOnboardingComponents: Record<
+  BrowserOnboardingPath,
+  React.JSX.Element
+> = {
+  '/browser': <Welcome />,
+  '/browser/scene': <Scene />,
+  '/browser/toolbar': <Toolbar />,
+  '/browser/text-to-cad': <TextToCad />,
+  '/browser/text-to-cad-prompt': <TextToCadPrompt />,
+  '/browser/feature-tree-pane': <FeatureTreePane />,
+  '/browser/prompt-to-edit': <PromptToEdit />,
+  '/browser/prompt-to-edit-prompt': <PromptToEditPrompt />,
+  '/browser/prompt-to-edit-result': <PromptToEditResult />,
+  '/browser/conclusion': <OnboardingConclusion />,
+}
 
 function Welcome() {
   const thisOnboardingStatus: BrowserOnboardingPath = '/browser'
diff --git a/src/routes/Onboarding/DesktopOnboardingRoutes.tsx b/src/routes/Onboarding/DesktopOnboardingRoutes.tsx
@@ -38,7 +38,7 @@ type DesktopOnboardingRoute = RouteObject & {
  *
  * Desktop onboarding content is completely separate from browser onboarding content.
  */
-const onboardingComponents: Record<DesktopOnboardingPath, JSX.Element> = {
+const onboardingComponents: Record<DesktopOnboardingPath, React.JSX.Element> = {
   '/desktop': <Welcome />,
   '/desktop/scene': <Scene />,
   '/desktop/toolbar': <Toolbar />,

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const AvailableVars = ({`
`35`	`35`
`36`	`36`	`export const addToInputHelper =`
`37`	`37`	`(`
`38`		`- inputRef: React.RefObject<HTMLInputElement>,`
	`38`	`+ inputRef: React.RefObject<HTMLInputElement \| null>,`
`39`	`39`	`setValue: (a: string) => void`
`40`	`40`	`) =>`
`41`	`41`	`(varName: string) => {`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export interface FileExplorerRender extends FileExplorerRow {`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`export interface FileExplorerRowContextMenuProps {`
`74`		`- itemRef: React.RefObject<HTMLElement>`
	`74`	`+ itemRef: React.RefObject<HTMLElement \| null>`
`75`	`75`	`onRename: () => void`
`76`	`76`	`onDelete: () => void`
`77`	`77`	`onOpenInNewWindow: () => void`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import {`
`4`	`4`	`} from '@src/lib/settings/initialKeybindings'`
`5`	`5`
`6`	`6`	`interface KeybindingSectionsListProps {`
`7`		`- scrollRef: React.RefObject<HTMLDivElement>`
	`7`	`+ scrollRef: React.RefObject<HTMLDivElement \| null>`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`export function KeybindingsSectionsList({`