If Graphin surround by <React.StrictMode> ， it will error in rendering.

[Ylliy]

Environment

React 18

use example in https://codesandbox.io/s/dreamy-wozniak-jkc5o5

change the index.tsx

* This is an auto-generated demo by dumi
* if you think it is not working as expected,
* please report the issue at
* https://github.com/umijs/dumi/issues
**/

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'antd/dist/antd.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
  <App />
  </React.StrictMode>
);

Error Message

[eakl]

Same error for me

[stefanmonkey]

same error for me
I just remove <React.StrictMode></React.StrictMode>, then fixed

[pomelo-nwu]

For the next major release iteration, we will support React 18

[joelbong]

First of all thanks for this awesome project!

Ok that would be nice, cause StrictMode is something helpfull to use in development. I'm curious about the reason though, is it because you work with react 17 or because of the class based components or something else? Because my issue is related, but not entirely due to strict mode.

I'm working with two libraries, tanstack query and antv/graphin. When using my application in strict mode and using both libraries, the antv/graphin library does not work, because the AbstraCtlasses instance has class variable that is undefined (see 'Error in console').
What dit the trick?

1. Disabling strict mode such that both libraries works (solution provided here)
2. Keeping strict mode, and not using tanstack query library

Last question, when will the major release be done?

Error in console:

Environment:
node version: 18.14.2
browser: chrome and firefox
package.json:
"dependencies": {
"@antv/graphin": "^2.7.26",
"@tanstack/react-query": "^4.33.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^20.5.9",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.5.0",
"@typescript-eslint/parser": "^6.5.0",
"@vitejs/plugin-react-swc": "^3.0.0",
"autoprefixer": "^10.4.15",
"eslint": "^8.48.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.29",
"prettier": "3.0.3",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2",
"vite": "^4.4.9"
}

[MetroTech-JD]

I experienced the same problem. With the Graphin component + tanstack no problem.
The bug I experienced was when I added the Minimap component:
Environment

"dependencies": {
"@antv/graphin": "^2.7.27",
"@antv/graphin-components": "^2.4.1",
"axios": "^1.6.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.3"
},
"devDependencies": {
"@tanstack/react-query-devtools": "^5.17.21",
"@types/node": "^20.11.7",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.17",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}