chore: update for React 19 compatibility

[jikkai]

TODO

• react-mentions is completely incompatible. @weird94
• react-beautiful-dnd has potential compatibility issues. @ybzky

BREAKING CHANGES

In React 16, the render method is imported from "react-dom", while in React 19, the createRoot method is imported from "react-dom/client". This creates a path compatibility issue. Therefore, in projects using React 16, you need to use an alias to map react-dom/client to a polyfill.

vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
+      "react-dom/client": path.resolve(__dirname, './src/client.ts'),
    }
  }
}

src/client.ts

import ReactDOM from 'react-dom'

export function createRoot(container: HTMLElement) {
  return {
    render: (element: JSX.Element) => {
      ReactDOM.render(element, container)
    }
  }
}

Additional Compatibility Note

In React 19 projects, certain components may trigger the following warnings. We will fix these issues gradually in future UI refactoring efforts.

Please don’t worry, this will not affect the functionality of your application.

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack

Pull Request Checklist

• Related tickets or issues have been linked in the PR description (or missing issue).
• Naming convention is followed (do please check it especially when you created new plugins, commands and resources).
• Unit tests have been added for the changes (if applicable).
• Breaking changes have been documented (or no breaking changes introduced in this PR).

[github-actions]

View Deployment

📑 Examples	📚 Storybook
🔗 Preview link	🔗 Preview link

[github-actions]

Playwright test results

 4 failed
 19 passed

Details

 23 tests across 10 suites
 8 minutes, 4 seconds
 d01f2c9
 For more information, see full report

Failed tests

chromium › memory/memory.spec.ts › memory
chromium › visual-comparison/docs/docs-visual-comparison.spec.ts › diff default doc content
chromium › visual-comparison/sheets/sheets-gridlines.spec.ts › sheets no gridlines
chromium › visual-comparison/sheets/sheets-visual-comparison.spec.ts › diff default sheet toolbar

[codecov]

Codecov Report

Attention: Patch coverage is 2.94118% with 33 lines in your changes missing coverage. Please review.

Project coverage is 32.64%. Comparing base (fcf5bbf) to head (ac4a6c7).

Files with missing lines	Patch %	Lines
packages/design/src/utils/render.ts	0.00%	12 Missing ⚠️
...ting-ui/src/components/panel/rule-edit/IconSet.tsx	0.00%	3 Missing ⚠️
...s-ui/src/views/mobile/sheet-bar/MobileSheetBar.tsx	0.00%	3 Missing ⚠️
...ui/src/views/sheets-thread-comment-panel/index.tsx	0.00%	2 Missing ⚠️
...mental/uni-slides-ui/src/views/UniSlideSideBar.tsx	0.00%	1 Missing ⚠️
packages/design/src/components/dialog/Dialog.tsx	0.00%	1 Missing ⚠️
...kages/docs-ui/src/components/editor/TextEditor.tsx	0.00%	1 Missing ⚠️
...atting-ui/src/components/panel/rule-edit/index.tsx	0.00%	1 Missing ⚠️
...-validation-ui/src/views/components/item/index.tsx	0.00%	1 Missing ⚠️
...ws/formula-editor/hooks/useSheetSelectionChange.ts	0.00%	1 Missing ⚠️
... and 7 more

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #4247      +/-   ##
==========================================
+ Coverage   32.61%   32.64%   +0.03%     
==========================================
  Files        2575     2576       +1     
  Lines      133707   133718      +11     
  Branches    29740    29741       +1     
==========================================
+ Hits        43602    43651      +49     
+ Misses      90105    90067      -38     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.