🐛[BUG] Missing or outdated dependencies and React 19 issues

[kirill-linnik]

My package.json:

{
...
  "dependencies": {
...
    "antd": "5.22.4",
    "react": "19.0.0",
    "react-dom": "19.0.0",
...
  },
...
  "devDependencies": {
    "@ant-design/charts": "2.2.5",
    "@ant-design/icons": "5.5.2",
... 
 }
}

When I do yarn:

warning @ant-design/charts > @ant-design/graphs > @antv/g6 > [email protected]: This package is no longer published on npmjs.com, you are using a deprecated and vulnerable version. Do not use it! Check project homepage on GitHub to see how to fetch the latest version: https://github.com/andriiheonia/hull?tab=readme-ov-file#npm-package
warning @ant-design/charts > @ant-design/plots > @antv/g2 > fmin > tape > [email protected]: Glob versions prior to v9 are no longer supported
warning @ant-design/charts > @ant-design/plots > @antv/g2 > fmin > tape > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@ant-design/charts > @ant-design/graphs > @antv/g6-extension-react > @antv/[email protected]" has incorrect peer dependency "react@^16.13.1".
warning "@ant-design/charts > @ant-design/graphs > @antv/g6-extension-react > @antv/react-g > [email protected]" has incorrect peer dependency "react@^17.0.2".
warning "@ant-design/charts > @ant-design/graphs > @antv/g6 > @antv/layout > @naoak/[email protected]" has unmet peer dependency "workerize-loader@*".

It used to be still OK with React 18.3.1, but after upgrading to the version 19.0.0 any page with a graph on it simply not working:

Error
A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

[lxfu1]

Are you interested in maintaining it together?

https://github.com/ant-design/ant-design-charts/blob/v2/packages/util/src/react/render.ts

[kirill-linnik]

frankly speaking, I was thinking about this, but for me pnpm build:lib & pnpm start ends with bunch of errors like this:

site start:    ,-[../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@[email protected]_e_mhdaxk4kc5delmnyzczhwcvha4/node_modules/dumi/theme-default/builtins/Previewer/index.js:6:1]
site start:  3 | import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/filled/close-circle.svg';
site start:  4 | import classnames from 'classnames';
site start:  5 | import { useLiveDemo, useLocation } from 'dumi';
site start:  6 | import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
site start:    :                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
site start:  7 | import React, { useRef } from 'react';
site start:  8 | import "./index.less";
site start:  9 | var Previewer = function Previewer(props) {
site start:    `----
site start: failed to resolve dumi/theme/builtins/Container from E:\ant-design-charts\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected]_@[email protected]_@[email protected]_e_mhdaxk4kc5delmnyzczhwcvha4\node_modules\dumi\dist\client\theme-api\DumiDemo\DemoErrorBoundary.js with resolver err: NotFound("dumi/theme/builtins/Container")
site start:   x Module not found: Can't resolve 'dumi/theme/builtins/Container'
site start:    ,-[../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@[email protected]_e_mhdaxk4kc5delmnyzczhwcvha4/node_modules/dumi/dist/client/theme-api/DumiDemo/DemoErrorBoundary.js:1:1]     
site start:  1 | import Container from 'dumi/theme/builtins/Container';
site start:    :                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
site start:  2 | import React from 'react';
site start:  3 | import { ErrorBoundary } from 'react-error-boundary';
site start:  4 | var DemoErrorBoundary = function DemoErrorBoundary(props) {
site start:    `----
site start: ✓ Built in 28559ms

[ThePapaX]

I managed to apply the changes required to get it to build with react 19.
But the documentation site get's broken... But I believe the library works well when standalone, so it might be something related to the way dumi is bundling the documentation site:
Package: https://github.com/umijs/dumi

TypeError: Cannot read properties of undefined (reading 'createRoot')
    at <anonymous>:74:28
    at <anonymous>:16:5
    at <anonymous>:19:3
    at execute (http://localhost:8000/vendors_4-async.js:11219:10)
    at http://localhost:8000/vendors_4-async.js:10702:28
    at invokeFunc (http://localhost:8000/vendors_1-async.js:12763:23)
    at trailingEdge (http://localhost:8000/vendors_1-async.js:12795:42)
    at timerExpired (http://localhost:8000/vendors_1-async.js:12787:40)

The error can be traced from the execute method from the @antv/dumi-theme-antv:

and from wherever this is getting bundled, it is not injecting the react-dom/client

And because CreateRoot method is in the react-dom/client it is yielding error...
Now I believe the issue is in either dumi or dumi-theme-antv package....

Are we blocked until then? or any ideas about that?