diff --git a/extension/package.json b/extension/package.json
index 40cf33ed..a661e6d1 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -41,10 +41,10 @@
"jsan": "^3.1.14",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0",
"react-icons": "^4.4.0",
- "react-is": "^17.0.2",
+ "react-is": "^18.1.0",
"react-json-tree": "^0.17.0",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
@@ -58,11 +58,11 @@
"@babel/preset-typescript": "^7.17.12",
"@babel/register": "^7.17.7",
"@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^12.1.5",
+ "@testing-library/react": "^13.3.0",
"@types/chrome": "^0.0.188",
"@types/lodash": "^4.14.182",
- "@types/react": "^17.0.45",
- "@types/react-dom": "^17.0.17",
+ "@types/react": "^18.0.12",
+ "@types/react-dom": "^18.0.5",
"@types/styled-components": "^5.1.25",
"babel-loader": "^8.2.5",
"bestzip": "^2.2.1",
diff --git a/extension/src/browser/extension/devpanel/index.tsx b/extension/src/browser/extension/devpanel/index.tsx
index af1823ad..af4fbfc3 100644
--- a/extension/src/browser/extension/devpanel/index.tsx
+++ b/extension/src/browser/extension/devpanel/index.tsx
@@ -1,5 +1,5 @@
import React, { CSSProperties } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
import { Provider } from 'react-redux';
import { Persistor } from 'redux-persist';
import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
@@ -27,23 +27,21 @@ let naTimeout: NodeJS.Timeout;
const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
-function renderDevTools() {
- const node = document.getElementById('root');
- unmountComponentAtNode(node!);
+function renderDevTools(root: Root) {
+ root.unmount();
clearTimeout(naTimeout);
({ store, persistor } = configureStore(position, bgConnection));
- render(
+ root.render(
- ,
- node
+
);
rendered = true;
}
-function renderNA() {
+function renderNA(root: Root) {
if (rendered === false) return;
rendered = false;
naTimeout = setTimeout(() => {
@@ -76,32 +74,31 @@ function renderNA() {
);
}
- const node = document.getElementById('root');
- unmountComponentAtNode(node!);
- render(message, node);
+ root.unmount();
+ root.render(message);
store = undefined;
});
} else {
- const node = document.getElementById('root');
- unmountComponentAtNode(node!);
- render(message, node);
+ root.unmount();
+ root.render(message);
store = undefined;
}
}, 3500);
}
function init(id: number) {
- renderNA();
+ const root = createRoot(document.getElementById('root')!);
+ renderNA(root);
bgConnection = chrome.runtime.connect({
name: id ? id.toString() : undefined,
});
bgConnection.onMessage.addListener(
>(message: PanelMessage) => {
if (message.type === 'NA') {
- if (message.id === id) renderNA();
+ if (message.id === id) renderNA(root);
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
} else {
- if (!rendered) renderDevTools();
+ if (!rendered) renderDevTools(root);
store!.dispatch(message);
}
}
diff --git a/extension/src/browser/extension/options/index.tsx b/extension/src/browser/extension/options/index.tsx
index 55805985..b344b86b 100644
--- a/extension/src/browser/extension/options/index.tsx
+++ b/extension/src/browser/extension/options/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import OptionsComponent from './Options';
import { Options } from './syncOptions';
@@ -13,10 +13,8 @@ chrome.runtime.getBackgroundPage((background) => {
};
const renderOptions = (options: Options) => {
- render(
- ,
- document.getElementById('root')
- );
+ const root = createRoot(document.getElementById('root')!);
+ root.render();
};
syncOptions.subscribe(renderOptions);
diff --git a/extension/src/browser/extension/window/index.tsx b/extension/src/browser/extension/window/index.tsx
index 4fc8d38a..41b72b08 100644
--- a/extension/src/browser/extension/window/index.tsx
+++ b/extension/src/browser/extension/window/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { UPDATE_STATE } from '@redux-devtools/app';
@@ -25,13 +25,13 @@ chrome.runtime.getBackgroundPage((window) => {
bg.onMessage.addListener(update);
update();
- render(
+ const root = createRoot(document.getElementById('root')!);
+ root.render(
- ,
- document.getElementById('root')
+
);
});
diff --git a/extension/src/browser/extension/window/remote.tsx b/extension/src/browser/extension/window/remote.tsx
index 4f8b196b..f91c372a 100644
--- a/extension/src/browser/extension/window/remote.tsx
+++ b/extension/src/browser/extension/window/remote.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { Root } from '@redux-devtools/app';
import '../../views/remote.pug';
@@ -15,7 +15,8 @@ chrome.storage.local.get(
},
(options) => {
const AppAsAny = Root as any;
- render(
+ const root = createRoot(document.getElementById('root')!);
+ root.render(
,
- document.getElementById('root')
+ />
);
}
);
diff --git a/package.json b/package.json
index 2955de09..dc0d0785 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,12 @@
"pnpm": {
"overrides": {
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
+ },
+ "peerDependencyRules": {
+ "allowedVersions": {
+ "react": "18",
+ "react-dom": "18"
+ }
}
}
}
diff --git a/packages/react-dock/demo/package.json b/packages/react-dock/demo/package.json
index ab87111c..4683d622 100644
--- a/packages/react-dock/demo/package.json
+++ b/packages/react-dock/demo/package.json
@@ -10,12 +10,12 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
- "react": "^17.0.2",
+ "react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dock": "^0.6.0",
- "react-dom": "^17.0.2",
+ "react-dom": "^18.1.0",
"react-icons": "^4.4.0",
- "react-is": "^17.0.2",
+ "react-is": "^18.1.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
@@ -24,8 +24,8 @@
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.17.12",
"@types/node": "^16.11.38",
- "@types/react": "^17.0.45",
- "@types/react-dom": "^17.0.17",
+ "@types/react": "^18.0.12",
+ "@types/react-dom": "^18.0.5",
"@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
diff --git a/packages/react-dock/demo/src/index.tsx b/packages/react-dock/demo/src/index.tsx
index b597a442..fb0bce67 100644
--- a/packages/react-dock/demo/src/index.tsx
+++ b/packages/react-dock/demo/src/index.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
import App from './App';
-ReactDOM.render(, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render();
diff --git a/packages/react-dock/package.json b/packages/react-dock/package.json
index e9f40955..5b691484 100644
--- a/packages/react-dock/package.json
+++ b/packages/react-dock/package.json
@@ -55,8 +55,8 @@
"@babel/preset-typescript": "^7.17.12",
"@types/jest": "^27.5.2",
"@types/lodash.debounce": "^4.0.7",
- "@types/react": "^17.0.45",
- "@types/react-test-renderer": "^17.0.2",
+ "@types/react": "^18.0.12",
+ "@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.17.0",
@@ -65,8 +65,8 @@
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"jest": "^27.5.1",
- "react": "^17.0.2",
- "react-test-renderer": "^17.0.2",
+ "react": "^18.1.0",
+ "react-test-renderer": "^18.1.0",
"rimraf": "^3.0.2",
"ts-jest": "^27.1.5",
"typescript": "~4.7.3"
diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json
index 82d0ce57..e1229e71 100644
--- a/packages/react-json-tree/examples/package.json
+++ b/packages/react-json-tree/examples/package.json
@@ -20,9 +20,9 @@
},
"dependencies": {
"immutable": "^4.1.0",
- "react": "^17.0.2",
+ "react": "^18.1.0",
"react-base16-styling": "^0.9.1",
- "react-dom": "^17.0.2",
+ "react-dom": "^18.1.0",
"react-json-tree": "^0.17.0"
},
"devDependencies": {
@@ -31,8 +31,8 @@
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.17.12",
"@types/node": "^16.11.38",
- "@types/react": "^17.0.45",
- "@types/react-dom": "^17.0.17",
+ "@types/react": "^18.0.12",
+ "@types/react-dom": "^18.0.5",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"babel-loader": "^8.2.5",
diff --git a/packages/react-json-tree/examples/src/index.tsx b/packages/react-json-tree/examples/src/index.tsx
index aca61f2f..7e1c5c48 100644
--- a/packages/react-json-tree/examples/src/index.tsx
+++ b/packages/react-json-tree/examples/src/index.tsx
@@ -1,5 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import React from 'react';
import App from './App';
-render(, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render();
diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json
index 7585601b..6c9b4304 100644
--- a/packages/react-json-tree/package.json
+++ b/packages/react-json-tree/package.json
@@ -64,8 +64,8 @@
"@rollup/plugin-node-resolve": "^13.3.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.38",
- "@types/react": "^17.0.45",
- "@types/react-test-renderer": "^17.0.2",
+ "@types/react": "^18.0.12",
+ "@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.17.0",
@@ -74,8 +74,8 @@
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"jest": "^27.5.1",
- "react": "^17.0.2",
- "react-test-renderer": "^17.0.2",
+ "react": "^18.1.0",
+ "react-test-renderer": "^18.1.0",
"rimraf": "^3.0.2",
"rollup": "^2.75.5",
"rollup-plugin-terser": "^7.0.2",
diff --git a/packages/redux-devtools-app/README.md b/packages/redux-devtools-app/README.md
index 60167928..021e71e7 100644
--- a/packages/redux-devtools-app/README.md
+++ b/packages/redux-devtools-app/README.md
@@ -16,10 +16,11 @@ Also it's a react component you can use to build amazing monitor applications li
```js
import React from 'react';
-import ReactDom from 'react-dom';
+import ReactDOM from 'react-dom/client';
import { Root } from '@redux-devtools/app';
-ReactDom.render(, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render();
```
### Parameters
diff --git a/packages/redux-devtools-app/demo/index.tsx b/packages/redux-devtools-app/demo/index.tsx
index f95bc46a..97641977 100644
--- a/packages/redux-devtools-app/demo/index.tsx
+++ b/packages/redux-devtools-app/demo/index.tsx
@@ -1,8 +1,9 @@
import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { Root } from '../src';
-render(, document.getElementById('root'));
+const root = createRoot(document.getElementById('root')!);
+root.render();
if (module.hot) {
// https://github.com/webpack/webpack/issues/418#issuecomment-53398056
diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json
index bcacf828..3d00267b 100644
--- a/packages/redux-devtools-app/package.json
+++ b/packages/redux-devtools-app/package.json
@@ -60,7 +60,7 @@
"lodash": "^4.17.21",
"prop-types": "^15.8.1",
"react-icons": "^4.4.0",
- "react-is": "^17.0.2",
+ "react-is": "^18.1.0",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
@@ -76,14 +76,14 @@
"@babel/preset-typescript": "^7.17.12",
"@rjsf/core": "^4.2.0",
"@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^12.1.5",
+ "@testing-library/react": "^13.3.0",
"@types/jest": "^27.5.2",
"@types/jsan": "^3.1.2",
"@types/json-schema": "^7.0.11",
"@types/lodash": "^4.14.182",
"@types/node": "^16.11.38",
- "@types/react": "^17.0.45",
- "@types/react-dom": "^17.0.17",
+ "@types/react": "^18.0.12",
+ "@types/react-dom": "^18.0.5",
"@types/socketcluster-client": "^13.0.5",
"@types/styled-components": "^5.1.25",
"@types/testing-library__jest-dom": "^5.14.3",
@@ -103,8 +103,8 @@
"html-webpack-plugin": "^5.5.0",
"jest": "^27.5.1",
"path-browserify": "^1.0.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0",
"rimraf": "^3.0.2",
"style-loader": "^3.3.1",
"styled-components": "^5.3.5",
diff --git a/packages/redux-devtools-chart-monitor/package.json b/packages/redux-devtools-chart-monitor/package.json
index cfde562a..e1d76b98 100644
--- a/packages/redux-devtools-chart-monitor/package.json
+++ b/packages/redux-devtools-chart-monitor/package.json
@@ -56,14 +56,14 @@
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "^7.17.12",
"@redux-devtools/core": "^3.13.1",
- "@types/react": "^17.0.45",
+ "@types/react": "^18.0.12",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
- "react": "^17.0.2",
+ "react": "^18.1.0",
"redux": "^4.2.0",
"rimraf": "^3.0.2",
"typescript": "~4.7.3"
diff --git a/packages/redux-devtools-cli/app/index.html b/packages/redux-devtools-cli/app/index.html
index 1c8ee65d..1fac0566 100644
--- a/packages/redux-devtools-cli/app/index.html
+++ b/packages/redux-devtools-cli/app/index.html
@@ -31,16 +31,15 @@