chore: update for React 19 compatibility

common/shared/eslint/index.js

@@ -51,6 +51,10 @@ exports.baseRules = {
     'command/command': 'off',
     'jsdoc/tag-lines': 'off',
 
+    // IMPORTANT: To ensure compatibility, some features of React 19 will be disabled.
+    'react/no-forward-ref': 'off',
+    'react/no-context-provider': 'off',
+
     // TODO: debatable rules
     'react/no-duplicate-key': 'warn',
     'test/prefer-lowercase-title': 'off',

common/shared/tsconfigs/base.json

@@ -2,7 +2,7 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "target": "ESNext",
-        "jsx": "react",
+        "jsx": "react-jsx",
         "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
         "useDefineForClassFields": true,
 

common/shared/vite/data.ts

@@ -18,12 +18,22 @@ export const peerDepsMap = {
     react: {
         global: 'React',
         name: 'react',
-        version: '^16.9.0 || ^17.0.0 || ^18.0.0',
+        version: '>=16.9.0 || >=17 || >=18 || >=19',
+    },
+    'react/jsx-runtime': {
+        global: 'React',
+        name: 'react',
+        version: 'react',
     },
     'react-dom': {
         global: 'ReactDOM',
         name: 'react-dom',
-        version: '^16.9.0 || ^17.0.0 || ^18.0.0',
+        version: '>=16.9.0 || >=17 || >=18 || >=19',
+    },
+    'react-dom/client': {
+        global: 'ReactDOM',
+        name: 'react-dom',
+        version: 'react-dom',
     },
     rxjs: {
         global: 'rxjs',

common/shared/vite/index.ts

@@ -201,6 +201,10 @@ export async function build(options?: IBuildOptions) {
         build: {
             target: 'chrome70',
         },
+        esbuild: {
+            minifyIdentifiers: false,
+            keepNames: true,
+        },
         resolve: {
             conditions: nodeFirst ? ['node', 'default'] : undefined,
         },

examples/package.json

@@ -71,14 +71,12 @@
         "@univerjs/uniui": "workspace:*",
         "@univerjs/watermark": "workspace:*",
         "monaco-editor": "0.52.2",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
         "react-mosaic-component": "^6.1.1"
     },
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
         "@univerjs-infra/shared": "workspace:*",
         "cross-env": "^7.0.3",
         "detect-port": "^1.6.1",

examples/src/main.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
+import { render } from '@univerjs/design';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
 import pkg from '../../package.json';
 
 import './global.css';
@@ -109,4 +109,4 @@ function Examples() {
     );
 }
 
-createRoot(document.getElementById('app')!).render(<Examples />);
+render(<Examples />, document.getElementById('app')!);

examples/src/sheets-multi/main.tsx

@@ -15,7 +15,7 @@
  */
 
 import { LocaleType, LogLevel, Tools, Univer, UniverInstanceType } from '@univerjs/core';
-import { defaultTheme } from '@univerjs/design';
+import { defaultTheme, render } from '@univerjs/design';
 
 import { UniverDocsPlugin } from '@univerjs/docs';
 import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
@@ -29,7 +29,6 @@ import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';
 import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
 import { UniverUIPlugin } from '@univerjs/ui';
 import React, { useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
 import { Mosaic, MosaicWindow } from 'react-mosaic-component';
 import { enUS, faIR, frFR, ruRU, zhCN } from '../locales';
 
@@ -114,4 +113,5 @@ export function App() {
         />
     );
 };
-createRoot(document.getElementById('app')!).render(<App />);
+
+render(<App />, document.getElementById('app')!);

package.json

@@ -19,8 +19,8 @@
         "url": "https://github.com/dream-num/univer/issues"
     },
     "engines": {
-        "node": ">=18.0.0",
-        "pnpm": ">=8.5.0 || >=9.0.0"
+        "node": ">=18 || <=22",
+        "pnpm": ">=9"
     },
     "scripts": {
         "prepare": "husky install",
@@ -53,8 +53,8 @@
         "@release-it/conventional-changelog": "^9.0.4",
         "@storybook/react": "8.4.7",
         "@types/node": "^22.10.2",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@univerjs-infra/shared": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@vitejs/plugin-react": "^4.3.4",
@@ -69,15 +69,21 @@
         "eslint-plugin-react-refresh": "^0.4.16",
         "husky": "^9.1.7",
         "lint-staged": "^15.3.0",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
         "release-it": "^17.11.0",
         "serve": "^14.2.4",
         "tsx": "^4.19.2",
         "turbo": "^2.3.3",
         "typescript": "^5.7.2",
         "vitest": "^2.1.8"
     },
+    "resolutions": {
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
+        "react": "19.0.0",
+        "react-dom": "19.0.0"
+    },
     "lint-staged": {
         "*": "eslint --fix"
     }

packages-experimental/action-recorder/package.json

@@ -62,7 +62,7 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages-experimental/debugger/package.json

@@ -53,7 +53,7 @@
         "build": "univer-cli build --skipUMD"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages-experimental/uni-formula-ui/package.json

@@ -62,7 +62,7 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages-experimental/uni-sheets-ui/package.json

@@ -56,7 +56,7 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages-experimental/uni-slides-ui/package.json

@@ -56,7 +56,7 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.9.0 || >=17 || >=18 || >=19"
     },
     "dependencies": {
         "@univerjs/core": "workspace:*",
@@ -72,7 +72,6 @@
         "less": "^4.2.1",
         "postcss": "^8.4.49",
         "react": "18.3.1",
-        "react-dom": "18.3.1",
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.7.2",

packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx

@@ -15,14 +15,13 @@
  */
 
 import type { SlideDataModel } from '@univerjs/core';
-import clsx from 'clsx';
 import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType, useDependency } from '@univerjs/core';
-import type { RefObject } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useObservable } from '@univerjs/ui';
 import { IRenderManagerService } from '@univerjs/engine-render';
-import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOperation } from '@univerjs/slides-ui';
 import { IncreaseSingle } from '@univerjs/icons';
+import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOperation } from '@univerjs/slides-ui';
+import { useObservable } from '@univerjs/ui';
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './index.module.less';
 
@@ -52,13 +51,10 @@ export function UniSlideSideBar() {
 
     const slideList = pageOrder.map((id) => pages[id]);
 
-    const [divRefs, setDivRefs] = useState<RefObject<HTMLDivElement>[]>([]);
     const [activatePageId, setActivatePageId] = useState<string | null>(pageOrder[0]);
     const [barHeight, setBarHeight] = useState(0);
 
-    useEffect(() => {
-        setDivRefs(slideList.map((_) => React.createRef()));
-    }, [slideList.length]);
+    const divRefs = useMemo(() => slideList.map(() => React.createRef<HTMLDivElement>()), [slideList]);
 
     useEffect(() => {
         const subscriber = currentSlide?.activePage$.subscribe((page) => {
@@ -119,7 +115,7 @@ export function UniSlideSideBar() {
                     </div>
                 ))}
             </div>
-            <button className={styles.newSlideButton} onClick={handleAppendSlide}>
+            <button type="button" className={styles.newSlideButton} onClick={handleAppendSlide}>
                 <IncreaseSingle className={styles.newSlideButtonIcon} />
                 <span>{localeService.t('slide.append')}</span>
             </button>

packages-experimental/uniui/package.json

@@ -56,8 +56,8 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
+        "react-dom": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages-experimental/uniui/src/controllers/uniui-desktop.controller.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { connectInjector, Disposable, Inject, Injector, LifecycleService, LifecycleStages, Optional, toDisposable } from '@univerjs/core';
-import type { IUniverUIConfig, IWorkbenchOptions } from '@univerjs/ui';
 import type { IDisposable } from '@univerjs/core';
+import type { IUniverUIConfig, IWorkbenchOptions } from '@univerjs/ui';
+import { connectInjector, Disposable, Inject, Injector, LifecycleService, LifecycleStages, Optional, toDisposable } from '@univerjs/core';
+import { render as createRoot, unmount } from '@univerjs/design';
 import { BuiltInUIPart, CanvasPopup, FloatDom, ILayoutService, IUIPartsService } from '@univerjs/ui';
 import React from 'react';
 import { delay, filter, take } from 'rxjs';
-import { render as createRoot, unmount } from 'rc-util/lib/React/render';
 
 import { UniWorkbench } from '../views/workbench/UniWorkbench';
 

packages/core/package.json

@@ -58,7 +58,7 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
         "rxjs": ">=7.0.0"
     },
     "dependencies": {

packages/design/package.json

@@ -64,26 +64,27 @@
         "build": "univer-cli build"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=16.9.0 || >=17 || >=18 || >=19",
+        "react-dom": ">=16.9.0 || >=17 || >=18 || >=19"
     },
     "dependencies": {
         "@rc-component/color-picker": "^2.0.1",
-        "@rc-component/trigger": "^2.2.5",
+        "@rc-component/trigger": "^2.2.6",
+        "@types/react-mentions": "^4.4.0",
         "@univerjs/icons": "^0.2.12",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
         "rc-dialog": "^9.6.0",
-        "rc-dropdown": "^4.2.0",
-        "rc-input": "^1.6.3",
+        "rc-dropdown": "^4.2.1",
+        "rc-input": "^1.7.1",
         "rc-input-number": "^9.3.0",
         "rc-menu": "^9.16.0",
-        "rc-picker": "^4.8.1",
-        "rc-segmented": "^2.5.0",
-        "rc-select": "^14.16.3",
+        "rc-picker": "^4.9.0",
+        "rc-segmented": "^2.7.0",
+        "rc-select": "^14.16.4",
         "rc-textarea": "^1.8.2",
         "rc-util": "^5.43.0",
-        "rc-virtual-list": "^3.15.0",
+        "rc-virtual-list": "^3.16.1",
         "react-draggable": "^4.4.6",
         "react-grid-layout": "^1.5.0",
         "react-transition-group": "^4.4.5",
@@ -92,6 +93,7 @@
     "devDependencies": {
         "@testing-library/react": "^16.1.0",
         "@types/react-grid-layout": "^1.3.5",
+        "@types/react-mentions": "^4.4.1",
         "@types/react-transition-group": "^4.4.11",
         "@univerjs-infra/shared": "workspace:*",
         "@univerjs/core": "workspace:*",

packages/design/src/components/dialog/Dialog.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
+import type { ModalStyles } from 'rc-dialog/lib/IDialogPropTypes';
+import type { DraggableData, DraggableEvent, DraggableEventHandler } from 'react-draggable';
 import { CloseSingle } from '@univerjs/icons';
 import RcDialog from 'rc-dialog';
 import React, { useContext, useRef, useState } from 'react';
-import type { DraggableData, DraggableEvent, DraggableEventHandler } from 'react-draggable';
-import Draggable from 'react-draggable';
 
-import type { ModalStyles } from 'rc-dialog/lib/IDialogPropTypes';
+import Draggable from 'react-draggable';
 import { ConfigContext } from '../config-provider/ConfigProvider';
 import styles from './index.module.less';
 
@@ -172,7 +172,7 @@ export function Dialog(props: IDialogProps) {
 
     const modalRender = (modal: React.ReactNode) => {
         const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
-        const draggleRef = useRef<HTMLDivElement>(null);
+        const draggleRef = useRef<HTMLDivElement>(null!);
 
         function handleStop(_event: MouseEvent, data: DraggableData) {
             if (preservePositionOnDestroy) {

packages/design/src/components/dropdown/DropdownProvider.tsx

@@ -26,8 +26,8 @@ interface IDropdownProviderProps {
 }
 
 export function DropdownProvider({ visible, children, disabled = false, onVisibleChange }: IDropdownProviderProps) {
-    const triggerRef = useRef<HTMLDivElement>(null);
-    const overlayRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null!);
+    const overlayRef = useRef<HTMLDivElement>(null!);
 
     const [internalShow, setInternalShow] = useState(false);
     const isControlled = visible !== undefined;