H-3832: Upgrade to React 19, Next 15

.github/actions/warm-up-repo/action.yml

@@ -13,7 +13,7 @@ runs:
   steps:
     - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
       with:
-        node-version: 20 ## aligned with Node version on Vercel
+        node-version: 22 ## aligned with Node version on Vercel
         # cache: yarn ## Currently disabled because of frequent timeouts
 
     - name: Install WASM tools

.github/workflows/renovate.yml

@@ -83,7 +83,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Enable corepack
         uses: ./.github/actions/enable-corepack

.github/workflows/test.yml

@@ -387,14 +387,14 @@ jobs:
         if: matrix.package == '@tests/hash-playwright' && success() || failure()
         uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
         with:
-          name: ${{ env.TRIMMED_PACKAGE_NAME }}-report
+          name: ${{ env.TRIMMED_PACKAGE_NAME }}_report
           path: tests/hash-playwright/playwright-report
 
       - name: Upload logs
         uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
         if: success() || failure()
         with:
-          name: ${{ env.TRIMMED_PACKAGE_NAME }}-logs
+          name: ${{ env.TRIMMED_PACKAGE_NAME }}_logs
           path: |
             var/api
             var/logs

.yarn/patches/@blockprotocol-core-npm-0.1.3-7c4f062e15.patch

@@ -0,0 +1,12 @@
+diff --git a/dist/react.d.ts b/dist/react.d.ts
+index 6c42997d24f2b03237bd9b09a0f8ab61940440fd..77023cfce80b6e0af32791d5827a53980610fa2a 100644
+--- a/dist/react.d.ts
++++ b/dist/react.d.ts
+@@ -13,6 +13,6 @@ export declare const useModuleConstructor: <T extends ModuleHandler>({ Handler,
+         callbacks?: Record<string, GenericMessageCallback> | undefined;
+         element?: HTMLElement | null | undefined;
+     }, "element"> | undefined;
+-    ref: RefObject<HTMLElement>;
++    ref: RefObject<HTMLElement | null>;
+ }) => T;
+ export {};

apps/hash-api/package.json

@@ -29,7 +29,7 @@
     "@aws-sdk/credential-provider-node": "3.716.0",
     "@aws-sdk/s3-presigned-post": "3.716.0",
     "@aws-sdk/s3-request-presigner": "3.716.0",
-    "@blockprotocol/core": "0.1.3",
+    "@blockprotocol/core": "patch:@blockprotocol/core@npm%3A0.1.3#~/.yarn/patches/@blockprotocol-core-npm-0.1.3-7c4f062e15.patch",
     "@blockprotocol/type-system": "0.1.2-canary.0",
     "@graphql-tools/schema": "8.5.1",
     "@linear/sdk": "6.0.0",

apps/hash-frontend/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/hash-frontend/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.10.5",
-    "@blockprotocol/core": "0.1.3",
+    "@blockprotocol/core": "patch:@blockprotocol/core@npm%3A0.1.3#~/.yarn/patches/@blockprotocol-core-npm-0.1.3-7c4f062e15.patch",
     "@blockprotocol/graph": "0.4.0-canary.0",
     "@blockprotocol/hook": "0.1.3",
     "@blockprotocol/service": "0.1.4",
@@ -72,7 +72,7 @@
     "elkjs": "0.9.3",
     "emoji-mart": "5.6.0",
     "fractional-indexing": "2.1.0",
-    "framer-motion": "6.5.1",
+    "framer-motion": "11.15.0",
     "graphology": "0.25.4",
     "graphology-layout": "0.6.1",
     "graphology-layout-forceatlas2": "0.10.1",
@@ -86,7 +86,7 @@
     "marked": "4.3.0",
     "material-ui-popup-state": "4.1.0",
     "millify": "6.1.0",
-    "next": "13.5.5",
+    "next": "15.1.0",
     "next-seo": "6.6.0",
     "nextjs-progressbar": "0.0.16",
     "notistack": "2.0.8",
@@ -101,9 +101,9 @@
     "prosemirror-state": "1.4.3",
     "prosemirror-transform": "1.7.0",
     "prosemirror-view": "patch:prosemirror-view@npm%3A1.29.1#~/.yarn/patches/prosemirror-view-npm-1.29.1-ff37db4eea.patch",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-beautiful-dnd": "13.1.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "react-dropzone": "14.3.5",
     "react-full-screen": "1.1.1",
     "react-hook-form": "7.54.1",
@@ -123,7 +123,7 @@
     "signia-react": "0.1.5",
     "url-regex-safe": "4.0.0",
     "use-font-face-observer": "1.2.2",
-    "uuid": "9.0.1"
+    "uuid": "11.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.3",
@@ -132,7 +132,7 @@
     "@graphql-codegen/typescript-operations": "2.5.13",
     "@local/eslint": "0.0.0-private",
     "@local/tsconfig": "0.0.0-private",
-    "@next/bundle-analyzer": "12.3.4",
+    "@next/bundle-analyzer": "15.1.0",
     "@types/dotenv-flow": "3.3.3",
     "@types/gapi": "0.0.47",
     "@types/google.accounts": "0.0.15",
@@ -141,12 +141,11 @@
     "@types/jsonpath": "0.2.4",
     "@types/lodash": "4.17.13",
     "@types/papaparse": "5.3.15",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.1",
     "@types/react-beautiful-dnd": "13.1.8",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "19.0.2",
     "@types/react-window": "1.8.8",
     "@types/url-regex-safe": "1.0.2",
-    "@types/uuid": "10.0.0",
     "@welldone-software/why-did-you-render": "8.0.3",
     "eslint": "9.17.0",
     "graphology-types": "0.24.8",

apps/hash-frontend/src/components/grid/utils/override-custom-renderers.tsx

@@ -1,6 +1,6 @@
 import type { DataEditorProps } from "@glideapps/glide-data-grid";
 import { isObjectEditorCallbackResult } from "@glideapps/glide-data-grid";
-import type { MutableRefObject, PropsWithChildren } from "react";
+import type { PropsWithChildren, RefObject } from "react";
 
 import { useEditBarContext } from "../../../shared/edit-bar-scroller";
 import { useScrollLock } from "../../../shared/use-scroll-lock";
@@ -28,7 +28,7 @@ const ScrollLockWrapper = ({ children }: PropsWithChildren) => {
  */
 export const overrideCustomRenderers = (
   customRenderers: DataEditorProps["customRenderers"],
-  tableIdRef: MutableRefObject<string>,
+  tableIdRef: RefObject<string>,
 ): DataEditorProps["customRenderers"] => {
   return customRenderers?.map(
     ({ draw, provideEditor, onClick, ...restFields }) => {
@@ -57,11 +57,11 @@ export const overrideCustomRenderers = (
 
           return {
             ...editorProps,
-            editor: (props, context) => {
+            editor: (props) => {
               if (isObjectEditorCallbackResult(editorProps)) {
                 return (
                   <ScrollLockWrapper>
-                    {editorProps.editor(props, context)}
+                    {editorProps.editor(props)}
                   </ScrollLockWrapper>
                 );
               }

apps/hash-frontend/src/components/grid/utils/use-grid-tooltip.tsx

@@ -14,7 +14,7 @@ import type {
 } from "./use-grid-tooltip/types";
 
 export const useGridTooltip = (
-  gridRef: RefObject<DataEditorRef>,
+  gridRef: RefObject<DataEditorRef | null>,
 ): UseGridTooltipResponse => {
   const popupState = usePopupState({
     variant: "popover",

apps/hash-frontend/src/components/remote-block/remote-block.tsx

@@ -107,8 +107,10 @@ export const RemoteBlock: FunctionComponent<RemoteBlockProps> = ({
     graphModule.registerCallbacks(graphCallbacks);
   }, [graphCallbacks, graphModule]);
 
+  /* @ts-expect-error –– @todo H-3839 packages in BP repo needs updating */
   useServiceEmbedderModule(wrapperRef, { callbacks: serviceModuleCallbacks });
 
+  /* @ts-expect-error –– @todo H-3839 packages in BP repo needs updating */
   useHookEmbedderModule(wrapperRef, {
     callbacks: {
       // eslint-disable-next-line @typescript-eslint/require-await -- async is required upstream

apps/hash-frontend/src/components/remote-block/use-remote-block.ts

@@ -76,9 +76,9 @@ export const useRemoteBlock: UseRemoteBlockHook = (
     }
   });
 
-  const onBlockLoadedRef = useRef<() => void>();
+  const onBlockLoadedRef = useRef<() => void>(null);
   useEffect(() => {
-    onBlockLoadedRef.current = onBlockLoaded;
+    onBlockLoadedRef.current = onBlockLoaded ?? null;
   });
 
   const loadedRef = useRef(false);

apps/hash-frontend/src/pages/[shortname].page/edit-pinned-entity-types-modal.tsx

@@ -60,7 +60,7 @@ const useDraggableInPortal = () => {
     };
   }, [element]);
 
-  return (render: (provided: DraggableProvided) => ReactElement) =>
+  return (render: (provided: DraggableProvided) => ReactElement<HTMLElement>) =>
     (provided: DraggableProvided) => {
       const result = render(provided);
 
@@ -271,6 +271,7 @@ export const EditPinnedEntityTypesModal: FunctionComponent<
                       isDragDisabled={isDragDisabled}
                       index={index}
                     >
+                      {/* @ts-expect-error -- fix maybe is https://github.com/atlassian/react-beautiful-dnd/blob/HEAD/docs/guides/reparenting.md  */}
                       {renderDraggable((provided) => (
                         <Box
                           ref={provided.innerRef}

apps/hash-frontend/src/pages/[shortname]/[page-slug].page.tsx

@@ -209,7 +209,7 @@ const Page: NextPageWithLayout<PageProps> = () => {
     fetchPolicy: "cache-and-network",
   });
 
-  const pageHeaderRef = useRef<HTMLElement>();
+  const pageHeaderRef = useRef<HTMLElement>(null);
 
   // Collab position tracking is disabled.
   // const collabPositions = useCollabPositions(accountId, pageEntityId);

apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/edit-entity-slide-over.tsx

@@ -82,7 +82,7 @@ export interface EditEntitySlideOverProps {
   onForward?: () => void;
   onEntityClick: (
     entityId: EntityId,
-    slideContainerRef?: RefObject<HTMLDivElement>,
+    slideContainerRef?: RefObject<HTMLDivElement | null>,
   ) => void;
   onSubmit: () => void;
   readonly?: boolean;
@@ -103,7 +103,7 @@ export interface EditEntitySlideOverProps {
   /**
    * If a container ref is provided, the slide will be attached to it (defaults to the MUI default, the body)
    */
-  slideContainerRef?: RefObject<HTMLDivElement>;
+  slideContainerRef?: RefObject<HTMLDivElement | null>;
 }
 
 /**

apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor.tsx

@@ -52,7 +52,7 @@ export interface EntityEditorProps extends DraftLinkState {
    * If the editor is loaded inside a slide which is contained in a container other than the body,
    * the ref to the container. Used to correctly position popups within the editor.
    */
-  slideContainerRef?: RefObject<HTMLDivElement>;
+  slideContainerRef?: RefObject<HTMLDivElement | null>;
   validationReport: MinimalEntityValidationReport | null;
 }
 

apps/hash-frontend/src/pages/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/change-type-cell.tsx

@@ -36,7 +36,7 @@ const changeText = "CHANGE";
 const changeTextFont = "700 11px Inter";
 
 export const createRenderChangeTypeCell = (
-  gridRef: RefObject<DataEditorRef>,
+  gridRef: RefObject<DataEditorRef | null>,
 ): CustomRenderer<ChangeTypeCell> => {
   return {
     kind: GridCellKind.Custom,

apps/hash-frontend/src/pages/[shortname]/shared/flow-visualizer/run-flow-modal/manual-trigger-input.tsx

@@ -1,6 +1,7 @@
 import { TextField } from "@hashintel/design-system";
 import type { SxProps, Theme } from "@mui/material";
 import { Switch } from "@mui/material";
+import type { JSX } from "react";
 
 import { EntitySelector } from "../../../../shared/entity-selector";
 import { EntityTypeSelector } from "../../../../shared/entity-type-selector";

apps/hash-frontend/src/pages/shared/block-collection/block-context-menu/block-context-menu-item.tsx

@@ -5,6 +5,7 @@ import {
   bindFocus,
   bindHover,
   bindPopover,
+  type PopupState,
   usePopupState,
 } from "material-ui-popup-state/hooks";
 import HoverPopover from "material-ui-popup-state/HoverPopover";
@@ -25,7 +26,7 @@ type BlockContextMenuItemProps = {
   onClick?: () => void;
   icon: ReactElement;
   title: string;
-  subMenu?: ReactElement;
+  subMenu?: ReactElement<{ closeMenu?: () => void; popupState?: PopupState }>;
   subMenuWidth?: number;
 };
 
@@ -49,7 +50,7 @@ export const BlockContextMenuItem = forwardRef<
     // access offsetTop in the useLayoutEffect. Consider using an library to handle merging refs
     // @see https://github.com/gregberge/react-merge-refs, or better still, use the
     // useForkRef exported by MUI
-    const menuItemRef = (ref ?? localRef) as RefObject<HTMLLIElement>;
+    const menuItemRef = (ref ?? localRef) as RefObject<HTMLLIElement | null>;
 
     useLayoutEffect(() => {
       if (subMenu && !subMenuOffsetTop && menuItemRef.current) {
@@ -114,7 +115,10 @@ export const BlockContextMenuItem = forwardRef<
                 },
               }}
             >
-              {cloneElement(subMenu, {
+              {cloneElement<{
+                closeMenu?: () => void;
+                popupState?: PopupState;
+              }>(subMenu, {
                 closeMenu,
                 popupState: subMenuPopupState,
               })}

apps/hash-frontend/src/pages/shared/block-collection/comments/comment-block.tsx

@@ -154,7 +154,9 @@ export const CommentBlock: FunctionComponent<CommentProps> = ({
 
   return (
     <Box
-      ref={(ref: HTMLDivElement) => setContainer(ref)}
+      ref={(ref: HTMLDivElement) => {
+        setContainer(ref);
+      }}
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -250,7 +252,6 @@ export const CommentBlock: FunctionComponent<CommentProps> = ({
           </IconButton>
         </Tooltip>
       </Box>
-
       <Box p={0.5} pt={2} position="relative">
         <Box
           sx={({ palette, transitions }) => ({
@@ -323,15 +324,13 @@ export const CommentBlock: FunctionComponent<CommentProps> = ({
           </Box>
         ) : null}
       </Box>
-
       {!editable && shouldCollapse && !collapsed ? (
         <ToggleTextExpandedButton
           label="Show Less"
           icon={faChevronUp}
           onClick={() => setCollapsed(true)}
         />
       ) : null}
-
       <CommentBlockMenu popupState={commentMenuPopupState}>
         {authenticatedUser.accountId === commentCreatedById ? (
           <CommentBlockMenuItem
@@ -370,7 +369,6 @@ export const CommentBlock: FunctionComponent<CommentProps> = ({
           />
         ) : null}
       </CommentBlockMenu>
-
       <CommentBlockDeleteConfirmationDialog
         container={container}
         open={deleteConfirmationDialogOpen}

apps/hash-frontend/src/pages/shared/block-collection/comments/comment-text-field.tsx

@@ -67,10 +67,10 @@ export const CommentTextField: FunctionComponent<CommentTextFieldProps> = ({
   onClose,
   onSubmit,
 }) => {
-  const viewRef = useRef<EditorView>();
+  const viewRef = useRef<EditorView>(null);
   const [portals, renderPortal] = usePortals();
   const { activeWorkspaceOwnedById } = useContext(WorkspaceContext);
-  const editorContainerRef = useRef<HTMLDivElement>();
+  const editorContainerRef = useRef<HTMLDivElement>(null);
   const editableRef = useRef(false);
   const eventsRef = useRef({ onClose, onSubmit, onLineCountChange });
 
@@ -181,7 +181,7 @@ export const CommentTextField: FunctionComponent<CommentTextFieldProps> = ({
       return () => {
         resizeObserver.unobserve(view.dom);
         view.destroy();
-        viewRef.current = undefined;
+        viewRef.current = null;
       };
     }
   }, [onChange, activeWorkspaceOwnedById, renderPortal]);

apps/hash-frontend/src/pages/shared/block-collection/create-editor-view.ts

@@ -147,7 +147,7 @@ export const createEditorView = (params: {
   isCommentingEnabled: boolean;
   ownedById: OwnedById;
   pageEntityId: EntityId;
-  pageTitleRef?: RefObject<HTMLTextAreaElement>;
+  pageTitleRef?: RefObject<HTMLTextAreaElement | null>;
   readonly: boolean;
   renderNode: HTMLElement;
   renderPortal: RenderPortal;

apps/hash-frontend/src/pages/shared/block-collection/focus-page-title-plugin.ts

@@ -2,7 +2,7 @@ import { Plugin } from "prosemirror-state";
 import type { RefObject } from "react";
 
 export const createFocusPageTitlePlugin = (
-  pageTitleRef: RefObject<HTMLTextAreaElement>,
+  pageTitleRef: RefObject<HTMLTextAreaElement | null>,
 ) =>
   // eslint-disable-next-line no-restricted-syntax -- prosemirror typing error
   new Plugin<unknown>({

apps/hash-frontend/src/pages/shared/block-collection/page-context.tsx

@@ -12,7 +12,7 @@ interface PageContextProps {
   pageEntityId: EntityId;
   editorContext: EditorContext | undefined;
   setEditorContext: (context: EditorContext) => void;
-  pageTitleRef: RefObject<HTMLTextAreaElement>;
+  pageTitleRef: RefObject<HTMLTextAreaElement | null>;
 }
 
 const PageContext = createContext<PageContextProps | null>(null);