reactful icon indicating copy to clipboard operation
reactful copied to clipboard

Adapt scaffold code to React 18

Open fgm opened this issue 3 years ago • 1 comments

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 />);

fgm avatar Oct 05 '22 13:10 fgm

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'),
 );

gutwinski avatar Dec 15 '24 02:12 gutwinski