craftercms · jvega190 · Sep 16, 2025 · Sep 16, 2025 · Sep 16, 2025 · Sep 17, 2025
@@ -80,20 +80,20 @@
     "bom:remove": "rimraf ./target/bom.json ./ui/**/target"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@types/node": "^24.2.1",
+    "@eslint/compat": "^2.0.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@types/node": "^24.10.1",
     "@types/rimraf": "^4.0.5",
     "build-if-changed": "^1.5.5",
-    "eslint": "^9.33.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "glob-gitignore": "^1.0.15",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.46.2",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-copy": "^3.5.0",
     "yargs": "^17.7.2"
   },

@@ -59,78 +59,78 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@graphiql/plugin-explorer": "^3.0.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/lab": "7.0.0-beta.16",
-    "@mui/material": "^7.3.1",
-    "@mui/x-data-grid": "^8.10.0",
-    "@mui/x-date-pickers": "^8.10.0",
-    "@mui/x-tree-view": "^8.10.0",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/lab": "7.0.1-beta.19",
+    "@mui/material": "^7.3.5",
+    "@mui/x-data-grid": "^8.20.0",
+    "@mui/x-date-pickers": "^8.19.0",
+    "@mui/x-tree-view": "^8.19.0",
     "@prettier/plugin-xml": "3.3.0",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@stomp/stompjs": "^7.1.1",
+    "@reduxjs/toolkit": "^2.10.1",
+    "@stomp/stompjs": "^7.2.1",
     "@types/ace": "^0.0.52",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.5",
     "@types/react-swipeable-views": "^0.13.6",
     "@types/video.js": "^7.3.58",
     "autosuggest-highlight": "^3.3.4",
     "clsx": "^2.1.1",
-    "fast-xml-parser": "^5.2.5",
+    "fast-xml-parser": "^5.3.2",
     "graphiql": "^3.2.2",
-    "graphql": "^16.11.0",
+    "graphql": "^16.12.0",
     "graphql-ws": "^6.0.6",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.11.1",
     "jabber": "^1.5.3",
     "js-cookie": "^3.0.5",
-    "marked": "^16.1.2",
-    "marked-highlight": "^2.2.2",
+    "marked": "^17.0.1",
+    "marked-highlight": "^2.2.3",
     "moment-timezone": "^0.6.0",
-    "nanoid": "^5.1.5",
+    "nanoid": "^5.1.6",
     "notistack": "3.0.2",
     "prettier": "^3.6.2",
-    "query-string": "^9.2.2",
-    "react": "18.3.1",
+    "query-string": "^9.3.1",
+    "react": "19.2.0",
     "react-animations": "^1.0.0",
-    "react-dom": "18.3.1",
-    "react-hotkeys-hook": "^5.1.0",
+    "react-dom": "19.2.0",
+    "react-hotkeys-hook": "^5.2.1",
     "react-infinite-scroller": "^1.2.6",
-    "react-intl": "^7.1.11",
+    "react-intl": "^7.1.14",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^6.23.1",
-    "react-swipeable-views": "^0.14.0",
-    "react-swipeable-views-utils": "^0.14.0",
+    "react-router": "^7.9.6",
+    "react-swipeable-views": "^0.14.1",
+    "react-swipeable-views-utils": "^0.14.1",
     "redux": "^5.0.1",
     "redux-observable": "^3.0.0-rc.2",
     "rxjs": "^7.8.1",
     "slugify": "^1.6.6",
     "tss-react": "^4.9.19",
     "uppy": "^3.27.3",
-    "uuid": "^11.1.0",
-    "video.js": "^8.23.4",
+    "uuid": "^13.0.0",
+    "video.js": "^8.23.6",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.7.2",
+    "@formatjs/cli": "^6.7.4",
     "@rollup/plugin-swc": "^0.4.0",
     "@types/js-cookie": "^3.0.6",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/zxcvbn": "^4.4.5",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "babel-plugin-formatjs": "^10.5.39",
+    "@typescript-eslint/eslint-plugin": "^8.48.0",
+    "@typescript-eslint/parser": "^8.48.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "babel-plugin-formatjs": "^10.5.41",
     "build-if-changed": "^1.5.5",
-    "eslint": "^9.33.0",
-    "eslint-plugin-formatjs": "^5.4.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint": "^9.39.1",
+    "eslint-plugin-formatjs": "^5.4.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.2"
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
   }
 }
@@ -3,6 +3,12 @@
 ## 5.0.1 (CrafterCMS 4.5.0)
 * [components]
   * `SearchBar`: Update the default DecoratorIcon to select the search input on click.
+* Upgraded:
+  * react to 19.1.1
+  * react-dom to 19.1.1
+  * react-router to 7.9.1
+  * uuid to 13.0.0
+  * and a host of other deps. See [4639](https://github.com/craftercms/studio-ui/pull/4639)
 
 ## 5.0.0 (CrafterCMS 4.4.3)
 * Version 5.0.0 should be paired with CrafterCMS 4.4.3 or later.

@@ -538,7 +538,6 @@ export function ActivityDashlet(props: ActivityDashletProps) {
             </SizedTimelineSeparator>
             <TimelineContent sx={emptyTimelineContentSx} />
           </CustomTimelineItem>
-          {/* @ts-expect-error - TS2786: InfiniteScroll cannot be used as a JSX component. Lib Types are not compatible with the latest react types. */}
           <InfiniteScroll
             initialLoad={false}
             pageStart={0}

@@ -28,7 +28,7 @@ import {
   RouterProvider,
   useLocation,
   Outlet
-} from 'react-router-dom';
+} from 'react-router';
 import SiteManagement from '../SiteManagement';
 import { getLauncherSectionLink, urlMapping } from '../LauncherSection/utils';
 import EmptyState from '../EmptyState/EmptyState';

@@ -38,7 +38,7 @@ import useActiveUser from '../../hooks/useActiveUser';
 import { batchActions, dispatchDOMEvent } from '../../state/actions/misc';
 import { closeConfirmDialog, showConfirmDialog } from '../../state/actions/dialogs';
 import { createCustomDocumentEventListener } from '../../utils/dom';
-import { useBeforeUnload, useNavigate } from 'react-router-dom';
+import { useBeforeUnload, useNavigate } from 'react-router';
 import { GlobalRoutes } from '../../env/routes';
 
 const translations = defineMessages({

@@ -24,7 +24,7 @@ import Box from '@mui/material/Box';
 import { useDispatch } from 'react-redux';
 import queryString from 'query-string';
 import { useIntl } from 'react-intl';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import usePreviewNavigation from '../../hooks/usePreviewNavigation';
 import useSiteLookup from '../../hooks/useSiteLookup';
 import useActiveSiteId from '../../hooks/useActiveSiteId';

@@ -17,14 +17,14 @@
 import Avatar from '@mui/material/Avatar';
 import CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';
 import * as React from 'react';
-import { CSSProperties } from 'react';
 import { PublishingStatus, PublishingStatusCodes } from '../../models/Publishing';
 import { makeStyles } from 'tss-react/mui';
 import { getPublishingStatusCodeColor } from './util';
+import { CSSObject } from 'tss-react';
 
 type PublishingStatusAvatarClassKey = 'root' | 'icon';
 
-type PublishingStatusAvatarStyles = Partial<Record<PublishingStatusAvatarClassKey, CSSProperties>>;
+type PublishingStatusAvatarStyles = Partial<Record<PublishingStatusAvatarClassKey, CSSObject>>;
 
 export interface PublishingStatusAvatarProps extends Pick<PublishingStatus, 'enabled' | 'status'> {
   className?: string;
@@ -35,7 +35,7 @@ export interface PublishingStatusAvatarProps extends Pick<PublishingStatus, 'ena
 
 const useStyles = makeStyles<{ styles: PublishingStatusAvatarStyles; stylingTarget: 'backgroundColor' | 'color' }>()((
   theme,
-  { styles, stylingTarget } = {} as any
+  { styles, stylingTarget } = {} as { styles: PublishingStatusAvatarStyles; stylingTarget: 'backgroundColor' | 'color' }
 ) => {
   return {
     root: {

@@ -30,7 +30,7 @@ import {
 } from './utils';
 import SearchUI from '../SearchUI';
 import { UNDEFINED } from '../../utils/constants';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 export function URLDrivenSearch(props: URLDrivenSearchProps) {
   const { mode = 'default', onSelect, embedded = false, onAcceptSelection, onClose } = props;

@@ -21,7 +21,7 @@ import useActiveSiteId from '../../../hooks/useActiveSiteId';
 import useEnv from '../../../hooks/useEnv';
 import SiteTools, { Tool } from '../SiteTools';
 import { getSystemLink } from '../../../utils/system';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { SiteToolsContext, SiteToolsContextProps } from '../siteToolsContext';
 
 interface UrlDrivenSiteToolsProps {

@@ -107,7 +107,6 @@ export function TransferListColumn(props: TransferListColumnProps) {
               }
             />
           ) : (
-            // @ts-expect-error - TS2786: InfiniteScroll cannot be used as a JSX component. Lib Types are not compatible with the latest react types.
             <InfiniteScroll
               initialLoad={false}
               pageStart={0}

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { createHashRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
+import { createHashRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router';
 import PreviewComponent from '../components/Preview/Preview';
 
 export default function Preview() {

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { createHashRouter, createRoutesFromElements, Route, RouterProvider, useParams } from 'react-router-dom';
+import { createHashRouter, createRoutesFromElements, Route, RouterProvider, useParams } from 'react-router';
 import URLDrivenSearch from '../components/Search/URLDrivenSearch';
 
 export default function SearchApp(topProps: any) {

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import { GlobalAppContextProvider } from '../components/GlobalApp';
 import UrlDrivenSiteTools from '../components/SiteTools/UrlDrivenSiteTools/UrlDrivenSiteTools';
 

@@ -63,7 +63,7 @@ export function withMonaco(onReady: (api: Monaco) => void): void {
   if (!monaco$) {
     monaco$ = new ReplaySubject(1);
     const script = document.createElement('script');
-    script.src = '/studio/static-assets/libs/monaco/monaco.0.52.2.js';
+    script.src = '/studio/static-assets/libs/monaco/monaco.0.54.0.js';
     script.onload = () => {
       // @ts-ignore
       monaco$.next(window.monaco);

@@ -50,46 +50,47 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@craftercms/classes": "^4.3.0",
-    "@craftercms/content": "^4.3.0",
+    "@craftercms/classes": "^4.4.0",
+    "@craftercms/content": "^4.4.2",
     "@craftercms/ice": "^4.3.0",
     "@craftercms/npm-content": "workspace:^",
     "@craftercms/search": "^4.3.0",
     "@craftercms/studio-ui": "workspace:^",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@types/react-dom": "^18.3.5",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "@reduxjs/toolkit": "^2.10.1",
+    "@rollup/plugin-alias": "^6.0.0",
     "js-cookie": "^3.0.5",
     "prop-types": "^15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-hotkeys-hook": "^5.1.0",
-    "react-is": "^19.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hotkeys-hook": "^5.2.1",
+    "react-is": "^19.2.0",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-observable": "^3.0.0-rc.2",
     "rxjs": "^7.8.1",
-    "typescript": "^5.9.2",
-    "uuid": "^11.1.0"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-swc": "^0.4.0",
-    "@swc/core": "^1.13.3",
-    "@types/jquery": "^3.5.32",
+    "@swc/core": "^1.15.3",
+    "@types/jquery": "^3.5.33",
     "@types/js-cookie": "^3.0.6",
     "@types/prop-types": "^15.7.15",
-    "@types/react-is": "^18.3.1",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-is": "^19.2.0",
     "build-if-changed": "^1.5.5",
     "npm-run-all": "^4.1.5",
-    "replace-in-file": "^7.1.0",
-    "rollup": "^4.46.2",
+    "replace-in-file": "^8.3.0",
+    "rollup": "^4.53.3",
     "rollup-plugin-swc3": "^0.12.1",
     "tinymce": "^7.1.1",
+    "typescript": "^5.9.3",
     "yargs": "^17.7.2"
-  }
+  },
+  "type": "module"
 }
@@ -14,10 +14,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-const pkg = require('../../app/package.json');
-
-const path = require('path');
-const fse = require('fs-extra');
+import pkg from '../../app/package.json' with { type: 'json' };
+import path from 'path';
+import fse from 'fs-extra';
 
 const packagePath = process.cwd();
 const appPath = path.resolve(packagePath, '../app');

@@ -14,14 +14,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-const pkg = require('../package.json');
-const path = require('path');
+import pkg from '../package.json' with { type: 'json' };
+import path from 'path';
 const packagePath = process.cwd();
 const buildPath = path.join(packagePath, './build_tsc');
 
-const replace = require('replace-in-file');
+import { replaceInFile } from 'replace-in-file';
 
-replace({
+replaceInFile({
   files: `${buildPath}/**/*.js`,
   from: ['process.env.VERSION', 'process.env.MIN_STUDIO_VERSION'],
   to: [`'${pkg.version}'`, `'${pkg.craftercms.minStudioVersion}'`]