chore: upgrade React 18→19 and fix breaking type changes

- react 18.2.0 to 19.2.6
- react-dom 18.2.0 to 19.2.6
- @types/react 18.2.39 to 19.2.15
- @types/react-dom 18.2.17 to 19.2.3

React 19 breaking changes fixed:
- useRef<T>(null) now returns RefObject<T | null>; cast to
  RefObject<T> at 16 component call sites (safe, runtime unchanged)
- useRef<T>() without arg no longer valid; add | undefined>(undefined)
  in useDebounce, useFileDrop, useThrottle, useVirtualPaginator hooks,
  RoomInput, RoomTimeline, and ClientNonUIFeatures
- useReducer<typeof reducer> 1-arg form removed; drop explicit type arg
  in useForceUpdate (inferred from reducer function)
- global JSX namespace removed; import type { JSX } from react in
  react-custom-html-parser.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.eslintignore

@@ -1,2 +0,0 @@
-experiment
-node_modules

.eslintrc.cjs

@@ -1,75 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'airbnb',
-    'prettier',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  globals: {
-    JSX: 'readonly',
-  },
-  plugins: ['react', '@typescript-eslint'],
-  rules: {
-    'linebreak-style': 0,
-    'no-underscore-dangle': 0,
-    'no-shadow': 'off',
-
-    'import/prefer-default-export': 'off',
-    'import/extensions': 'off',
-    'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: true,
-      },
-    ],
-
-    'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
-    'react/jsx-filename-extension': [
-      'error',
-      {
-        extensions: ['.tsx', '.jsx'],
-      },
-    ],
-
-    'react/require-default-props': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    // React Compiler rules added in react-hooks v7 — disabled until React Compiler is adopted
-    'react-hooks/react-compiler': 'off',
-    'react-hooks/incompatible-library': 'off',
-    'react-hooks/refs': 'off',
-    'react-hooks/set-state-in-effect': 'off',
-    'react-hooks/set-state-in-render': 'off',
-    'react-hooks/immutability': 'off',
-    'react-hooks/purity': 'off',
-    'react-hooks/use-memo': 'off',
-
-    '@typescript-eslint/no-unused-vars': 'error',
-    '@typescript-eslint/no-shadow': 'error',
-  },
-  overrides: [
-    {
-      files: ['*.ts'],
-      rules: {
-        'no-undef': 'off',
-      },
-    },
-  ],
-};

eslint.config.mjs

@@ -0,0 +1,99 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import globals from 'globals';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  { ignores: ['node_modules/**', 'dist/**', 'experiment/**'] },
+  js.configs.recommended,
+  tsPlugin.configs['flat/eslint-recommended'],
+  ...tsPlugin.configs['flat/recommended'],
+  reactPlugin.configs.flat.recommended,
+  reactHooksPlugin.configs.flat['recommended'],
+  // airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
+  ...compat.extends('airbnb-base'),
+  eslintConfigPrettier,
+  {
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        JSX: 'readonly',
+      },
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    settings: {
+      react: {
+        version: '18.2.0',
+      },
+    },
+    rules: {
+      'linebreak-style': 0,
+      'no-unused-vars': 'off', // handled by @typescript-eslint/no-unused-vars
+      'no-underscore-dangle': 0,
+      'no-shadow': 'off',
+
+      'import/prefer-default-export': 'off',
+      'import/extensions': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: true,
+        },
+      ],
+
+      'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
+      'react/jsx-filename-extension': [
+        'error',
+        {
+          extensions: ['.tsx', '.jsx'],
+        },
+      ],
+
+      'react/display-name': 'off',
+      'react/require-default-props': 'off',
+      'react/jsx-props-no-spreading': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      // React Compiler rules added in react-hooks v7 — disabled until React Compiler is adopted
+      'react-hooks/react-compiler': 'off',
+      'react-hooks/incompatible-library': 'off',
+      'react-hooks/refs': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/set-state-in-render': 'off',
+      'react-hooks/immutability': 'off',
+      'react-hooks/purity': 'off',
+      'react-hooks/use-memo': 'off',
+
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-shadow': 'error',
+    },
+  },
+  {
+    files: ['**/*.ts'],
+    rules: {
+      'no-undef': 'off',
+    },
+  },
+];

package.json

@@ -66,6 +66,8 @@
     "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@eslint/eslintrc": "3.3.5",
+    "@eslint/js": "10.0.1",
     "@fontsource-variable/inter": "5.2.8",
     "@giphy/js-fetch-api": "5.8.0",
     "@giphy/js-types": "5.1.0",
@@ -91,6 +93,7 @@
     "file-saver": "2.0.5",
     "focus-trap-react": "12.0.2",
     "folds": "2.6.2",
+    "globals": "17.6.0",
     "html-dom-parser": "7.1.0",
     "html-react-parser": "6.1.2",
     "i18next": "26.2.0",
@@ -102,18 +105,18 @@
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
     "lodash": "4.18.1",
-    "matrix-js-sdk": "41.5.0",
+    "matrix-js-sdk": "41.6.0-rc.0",
     "matrix-widget-api": "1.17.0",
     "millify": "6.1.0",
     "pdfjs-dist": "5.7.284",
     "prismjs": "1.30.0",
-    "react": "18.2.0",
+    "react": "19.2.6",
     "react-aria": "3.48.0",
     "react-blurhash": "0.3.0",
     "react-colorful": "5.7.0",
-    "react-dom": "18.2.0",
+    "react-dom": "19.2.6",
     "react-error-boundary": "6.1.1",
-    "react-google-recaptcha": "2.1.0",
+    "react-google-recaptcha": "3.1.0",
     "react-i18next": "17.0.8",
     "react-range": "1.10.0",
     "react-router-dom": "7.15.1",
@@ -138,20 +141,20 @@
     "@types/is-hotkey": "0.1.10",
     "@types/node": "25.9.1",
     "@types/prismjs": "1.26.6",
-    "@types/react": "18.2.39",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
     "@types/react-google-recaptcha": "2.1.9",
     "@types/sanitize-html": "2.16.1",
     "@types/ua-parser-js": "0.7.39",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.59.4",
+    "@typescript-eslint/parser": "8.59.4",
     "@vanilla-extract/css": "1.20.1",
     "@vanilla-extract/recipes": "0.5.7",
     "@vanilla-extract/vite-plugin": "5.2.2",
-    "@vitejs/plugin-react": "5.2.0",
+    "@vitejs/plugin-react": "6.0.2",
     "buffer": "6.0.3",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "8.57.1",
+    "eslint": "9.39.4",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
@@ -162,8 +165,8 @@
     "lint-staged": "17.0.5",
     "prettier": "3.8.3",
     "semantic-release": "25.0.3",
-    "typescript": "5.9.3",
-    "vite": "6.4.2",
+    "typescript": "6.0.3",
+    "vite": "8.0.14",
     "vite-plugin-pwa": "1.3.0",
     "vite-plugin-static-copy": "4.1.0"
   },

src/app/components/CallEmbedProvider.tsx

@@ -399,7 +399,7 @@ type CallEmbedProviderProps = {
 };
 export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const callEmbed = useAtomValue(callEmbedAtom);
-  const callEmbedRef = useRef<HTMLDivElement>(null);
+  const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const joined = useCallJoined(callEmbed);
 
   const selectedRoom = useSelectedRoom();

src/app/components/ConfirmPasswordMatch.tsx

@@ -12,8 +12,8 @@ type ConfirmPasswordMatchProps = {
 };
 export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
   const [match, setMatch] = useState(initialValue);
-  const passRef = useRef<HTMLInputElement>(null);
-  const confPassRef = useRef<HTMLInputElement>(null);
+  const passRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const confPassRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
 
   const doMatch = useDebounce(
     useCallback(() => {

src/app/components/emoji-board/EmojiBoard.tsx

@@ -421,8 +421,8 @@ export function EmojiBoard({
     { wait: 200 },
   );
 
-  const contentScrollRef = useRef<HTMLDivElement>(null);
-  const virtualBaseRef = useRef<HTMLDivElement>(null);
+  const contentScrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const virtualBaseRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const virtualizer = useVirtualizer({
     count: groups.length,
     getScrollElement: () => contentScrollRef.current,

src/app/features/call/CallView.tsx

@@ -152,7 +152,7 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
 
 export function CallView() {
   const room = useRoom();
-  const callContainerRef = useRef<HTMLDivElement>(null);
+  const callContainerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   useCallEmbedPlacementSync(callContainerRef);
 
   const callEmbed = useCallEmbed();

src/app/features/common-settings/members/Members.tsx

@@ -95,9 +95,9 @@ export function Members({ requestClose }: MembersProps) {
   const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
   const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const sortedMembers = useMemo(
     () =>

src/app/features/lobby/Lobby.tsx

@@ -159,8 +159,8 @@ export function Lobby() {
   const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
   const members = useRoomMembers(mx, space.roomId);
 
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const heroSectionRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const heroSectionRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
   const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');

src/app/features/lobby/RoomItem.tsx

@@ -315,8 +315,8 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const room = getRoom(roomId);
-    const targetRef = useRef<HTMLDivElement>(null);
-    const targetHandleRef = useRef<HTMLDivElement>(null);
+    const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+    const targetHandleRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
     useDraggableItem(item, targetRef, onDragging, targetHandleRef);
 
     const joined = room?.getMyMembership() === Membership.Join;

src/app/features/lobby/SpaceItem.tsx

@@ -429,7 +429,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const space = getRoom(roomId);
-    const targetRef = useRef<HTMLDivElement>(null);
+    const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
     useDraggableItem(item, targetRef, onDragging);
 
     return (

src/app/features/message-search/MessageSearch.tsx

@@ -60,8 +60,8 @@ export function MessageSearch({
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [searchParams, setSearchParams] = useSearchParams();
   const searchPathSearchParams = useSearchPathSearchParams(searchParams);
   const { navigateRoom } = useRoomNavigate();

src/app/features/room/MembersDrawer.tsx

@@ -180,9 +180,9 @@ type MembersDrawerProps = {
 export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
   const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);

src/app/features/room/RoomInput.tsx

@@ -176,7 +176,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       roomUploadAtomFamily,
       selectedFiles.map((f) => f.file),
     );
-    const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
+    const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers | undefined>(undefined);
 
     const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
 

src/app/features/room/RoomTimeline.tsx

@@ -494,7 +494,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
   const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
-  const readUptoEventIdRef = useRef<string>();
+  const readUptoEventIdRef = useRef<string | undefined>(undefined);
   if (unreadInfo) {
     readUptoEventIdRef.current = unreadInfo.readUptoEventId;
   }

src/app/features/room/RoomView.tsx

@@ -57,8 +57,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
 };
 
 export function RoomView({ eventId }: { eventId?: string }) {
-  const roomInputRef = useRef<HTMLDivElement>(null);
-  const roomViewRef = useRef<HTMLDivElement>(null);
+  const roomInputRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const roomViewRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const theme = useTheme();

src/app/hooks/useDebounce.ts

@@ -10,7 +10,7 @@ export function useDebounce<T extends unknown[]>(
   callback: DebounceCallback<T>,
   options?: DebounceOptions,
 ): DebounceCallback<T> {
-  const timeoutIdRef = useRef<number>();
+  const timeoutIdRef = useRef<number | undefined>(undefined);
   const { wait, immediate } = options ?? {};
 
   const debounceCallback = useCallback(

src/app/hooks/useFileDrop.ts

@@ -14,7 +14,7 @@ export const useFileDropZone = (
   zoneRef: RefObject<HTMLElement>,
   onDrop: (file: File[]) => void,
 ): boolean => {
-  const dragStateRef = useRef<'start' | 'leave' | 'over'>();
+  const dragStateRef = useRef<'start' | 'leave' | 'over' | undefined>(undefined);
   const [active, setActive] = useState(false);
 
   useEffect(() => {

src/app/hooks/useForceUpdate.ts

@@ -3,7 +3,7 @@ import { useReducer } from 'react';
 const reducer = (prevCount: number): number => prevCount + 1;
 
 export const useForceUpdate = (): [number, () => void] => {
-  const [state, dispatch] = useReducer<typeof reducer>(reducer, 0);
+  const [state, dispatch] = useReducer(reducer, 0);
 
   return [state, dispatch];
 };

src/app/hooks/useThrottle.ts

@@ -11,8 +11,8 @@ export function useThrottle<T extends unknown[]>(
   callback: ThrottleCallback<T>,
   options?: ThrottleOptions,
 ): ThrottleCallback<T> {
-  const timeoutIdRef = useRef<number>();
-  const argsRef = useRef<T>();
+  const timeoutIdRef = useRef<number | undefined>(undefined);
+  const argsRef = useRef<T | undefined>(undefined);
   const { wait, immediate } = options ?? {};
 
   const debounceCallback = useCallback(

src/app/hooks/useVirtualPaginator.ts

@@ -166,16 +166,22 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
 
   const initialRenderRef = useRef(true);
 
-  const restoreScrollRef = useRef<{
+  const restoreScrollRef = useRef<
+    | {
         scrollTop: number;
         anchorOffsetTop: number;
         anchorItem: number;
-  }>();
+      }
+    | undefined
+  >(undefined);
 
-  const scrollToItemRef = useRef<{
+  const scrollToItemRef = useRef<
+    | {
         index: number;
         opts?: ScrollToOptions;
-  }>();
+      }
+    | undefined
+  >(undefined);
 
   const propRef = useRef({
     range,

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -130,7 +130,7 @@ function InviteNotifications() {
 
 function MessageNotifications() {
   const audioRef = useRef<HTMLAudioElement>(null);
-  const notifRef = useRef<Notification>();
+  const notifRef = useRef<Notification | undefined>(undefined);
   const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();

src/app/pages/client/SidebarNav.tsx

@@ -20,7 +20,7 @@ import {
 import { CreateTab } from './sidebar/CreateTab';
 
 export function SidebarNav() {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   return (
     <Sidebar>

src/app/pages/client/explore/Server.tsx

@@ -355,8 +355,8 @@ export function PublicRooms() {
   const [searchParams] = useSearchParams();
   const serverSearchParams = useServerSearchParams(searchParams);
   const isSearch = !!serverSearchParams.term;
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
   const navigate = useNavigate();
   const roomTypeFilters = useRoomTypeFilters();
 

src/app/pages/client/home/Search.tsx

@@ -7,7 +7,7 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function HomeSearch() {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const rooms = useHomeRooms();
   const screenSize = useScreenSizeContext();
 

src/app/pages/client/inbox/Notifications.tsx

@@ -575,8 +575,8 @@ export function Notifications() {
   const { navigateRoom } = useRoomNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const notificationsSearchParams = useNotificationsSearchParams(searchParams);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [refreshIntervalTime, setRefreshIntervalTime] = useState(DEFAULT_REFRESH_MS);
 
   const onlyHighlight = notificationsSearchParams.only === 'highlight';

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -402,7 +402,7 @@ function SpaceTab({
 }: SpaceTabProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const targetRef = useRef<HTMLDivElement>(null);
+  const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: SidebarDraggable = useMemo(
     () =>
@@ -506,8 +506,8 @@ type OpenedSpaceFolderProps = {
   children?: ReactNode;
 };
 function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps) {
-  const aboveTargetRef = useRef<HTMLDivElement>(null);
-  const belowTargetRef = useRef<HTMLDivElement>(null);
+  const aboveTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const belowTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: SidebarDraggable = useMemo(() => ({ folder, open: true }), [folder]);
 
@@ -554,7 +554,7 @@ function ClosedSpaceFolder({
 }: ClosedSpaceFolderProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const handlerRef = useRef<HTMLDivElement>(null);
+  const handlerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
 
   const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
   useDraggableItem(spaceDraggable, handlerRef, onDragging);

src/app/pages/client/space/Search.tsx

@@ -14,7 +14,7 @@ import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const space = useSpace();
   const screenSize = useScreenSizeContext();
 

src/app/plugins/call/CallControl.ts

@@ -1,5 +1,5 @@
 import { ClientWidgetApi } from 'matrix-widget-api';
-import EventEmitter from 'events';
+import { EventEmitter } from 'events';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
 

src/app/plugins/react-custom-html-parser.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React, {
+  type JSX,
   ComponentPropsWithoutRef,
   ReactEventHandler,
   Suspense,

src/client/initMatrix.ts

@@ -17,12 +17,12 @@ export const IDB_VERSION_CONFLICT = 'IDB_VERSION_CONFLICT';
 
 export const initClient = async (session: Session): Promise<MatrixClient> => {
   const indexedDBStore = new IndexedDBStore({
-    indexedDB: global.indexedDB,
-    localStorage: global.localStorage,
+    indexedDB: globalThis.indexedDB,
+    localStorage: globalThis.localStorage,
     dbName: 'web-sync-store',
   });
 
-  const legacyCryptoStore = new IndexedDBCryptoStore(global.indexedDB, 'crypto-store');
+  const legacyCryptoStore = new IndexedDBCryptoStore(globalThis.indexedDB, 'crypto-store');
 
   const mx = createClient({
     baseUrl: session.baseUrl,

tsconfig.json

@@ -2,16 +2,16 @@
   "compilerOptions": {
     "sourceMap": true,
     "jsx": "react",
-    "target": "ES2016",
+    "target": "ES2020",
     "module": "ES2020",
     "allowJs": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "outDir": "dist",
     "skipLibCheck": true,
-    "lib": ["ES2016", "DOM"]
+    "lib": ["ES2020", "DOM"]
   },
   "exclude": ["node_modules", "dist"],
   "include": ["src"]

vite.config.js

@@ -4,7 +4,6 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import { wasm } from '@rollup/plugin-wasm';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
 import inject from '@rollup/plugin-inject';
 import { VitePWA } from 'vite-plugin-pwa';
 import fs from 'fs';
@@ -127,16 +126,10 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    esbuildOptions: {
+    rolldownOptions: {
       define: {
         global: 'globalThis',
       },
-      plugins: [
-        NodeGlobalsPolyfillPlugin({
-          process: false,
-          buffer: true,
-        }),
-      ],
     },
   },
   build: {