reactful
reactful copied to clipboard
Adapt scaffold code to React 18
The scaffold code still used ReactDOM.hydrate which is deprecated in React 18, and needs to be replaced by something like:
const container =document.getElementById('mountNode');
const root = hydrateRoot(container, <App />);
Applying the following changes made my code work again with Node v18.20.4:
diff --git a/src/renderers/dom.js b/src/renderers/dom.js
index 29efd01..c80a96b 100644
--- a/src/renderers/dom.js
+++ b/src/renderers/dom.js
@@ -1,11 +1,12 @@
import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
import { App } from 'components/App';
import '../styles/index.css';
-ReactDOM.hydrate(
+const container = document.getElementById('root');
+ReactDOM.hydrateRoot(
+ container,
<App initialData={window.__R_DATA.initialData} />,
- document.getElementById('root'),
);