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

 3 failed
 18 passed

Details

 21 tests across 10 suites
 6 minutes, 9 seconds
 8796a73
 For more information, see full report

Failed tests

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 3.03030% with 32 lines in your changes missing coverage. Please review.

Project coverage is 33.35%. Comparing base (0124730) to head (8796a73).

Files with missing lines	Patch %	Lines
packages/design/src/utils/render.ts	0.00%	12 Missing ⚠️
...s-ui/src/views/mobile/sheet-bar/MobileSheetBar.tsx	0.00%	3 Missing ⚠️
...ting-ui/src/components/panel/rule-edit/IconSet.tsx	0.00%	2 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   33.33%   33.35%   +0.01%     
==========================================
  Files        2528     2529       +1     
  Lines      130533   130544      +11     
  Branches    29142    29143       +1     
==========================================
+ Hits        43516    43543      +27     
+ Misses      87017    87001      -16     

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