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

 23 passed

Details

 23 tests across 10 suites
 5 minutes, 9 seconds
 47a5f5c
 For more information, see full report

[codecov]

Codecov Report

Attention: Patch coverage is 34.54545% with 36 lines in your changes missing coverage. Please review.

Project coverage is 32.65%. Comparing base (266dadc) to head (47a5f5c).
Report is 1 commits behind head on dev.

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 ⚠️
packages/design/src/components/input/Input.tsx	88.88%	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/views/rich-text-editor/index.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 ⚠️
... and 9 more

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #4247      +/-   ##
==========================================
+ Coverage   32.60%   32.65%   +0.05%     
==========================================
  Files        2597     2598       +1     
  Lines      134826   134844      +18     
  Branches    30000    30006       +6     
==========================================
+ Hits        43955    44030      +75     
+ Misses      90871    90814      -57     

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

[hexf00]

UMD users need to pay attention.

Starting from Univer 0.6.0, with the support for React 19¹, UMD users may need additional adaptation.
It is recommended to migrate to module script² and a more modern build system.

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
  /**
   * Fix `Uncaught TypeError: client.createRoot is not a function`
   * If using UMD React < 18, you might need the following code.
   */
  (function (global) {
    'use strict';
    if (!global.ReactDOM) {
      throw new Error('ReactDOM must be loaded before ReactCreateRoot.');
    }
    var ReactDOM = global.ReactDOM;
    if (!ReactDOM.createRoot) {
      ReactDOM.createRoot = function (container) {
        return {
          render: (element) => {
            ReactDOM.render(element, container);
          },
        };
      };
    }
  })(this);

  /**
   * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
   * If using UMD React, you might need the following code.
   * Reference: https://unpkg.com/[email protected]/cjs/react-jsx-runtime.production.min.js
   */
  (function (global) {
    'use strict';
    if (!global.React) {
      throw new Error('React must be loaded before ReactJSXRuntime.');
    }
    var React = global.React;
    if (!React.jsx || !React.jsxs) {
      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
      var hasOwnProperty = Object.prototype.hasOwnProperty;
      var RESERVED_PROPS = {
        key: true,
        ref: true,
        __self: true,
        __source: true,
      };
      var ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
      function createReactElement(type, config, maybeKey) {
        var props = {};
        var key = null;
        var ref = null;
        if (maybeKey !== undefined) {
          key = '' + maybeKey;
        }
        if (config.key !== undefined) {
          key = '' + config.key;
        }
        if (config.ref !== undefined) {
          ref = config.ref;
        }
        for (var propName in config) {
          if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
            props[propName] = config[propName];
          }
        }
        if (type && type.defaultProps) {
          var defaultProps = type.defaultProps;
          for (var propName in defaultProps) {
            if (props[propName] === undefined) {
              props[propName] = defaultProps[propName];
            }
          }
        }
        return {
          $$typeof: REACT_ELEMENT_TYPE,
          type: type,
          key: key,
          ref: ref,
          props: props,
          _owner: ReactCurrentOwner.current,
        };
      }
      React.jsx = createReactElement;
      React.jsxs = createReactElement;
    }
  })(this);
</script>

Footnotes

1. [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html ↩

2. [support for React 19] https://github.com/dream-num/univer/pull/4247 ↩