React 18 support: use hydrateRoot
See original GitHub issueWith the React 18 update some of the API methods were replaced, so usage of
const {render} = await getPage({route})
render()
produces following warning to the console:
Warning: ReactDOM.hydrate is no longer supported in React 18.
Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
Learn more: https://reactjs.org/link/switch-to-createroot
Issue Analytics
- State:
- Created a year ago
- Comments:5
Top Results From Across the Web
How to Upgrade to React 18
ReactDOM.render is no longer supported in React 18. ... your app uses server-side rendering with hydration, upgrade hydrate to hydrateRoot :.
Read more >React 18 introduces new root API ( ReactDOM.createRoot )
The Root API. In React, we render our App component into the root element on the page. Here we are using a simple...
Read more >ReactDOM.render is no longer supported in React 18 - Stack ...
Use this in React version 18 const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);.
Read more >Moving createRoot/hydrateRoot to react-dom/client #125
For the next React 18 RC (RC 1) we're moving both createRoot and hydrateRoot to ... You are importing hydrateRoot from "react-dom" which...
Read more >React18: New Features and Updates | by SATYAJIT ROUT
React 18 is now available on npm and has some exciting features and updates ... To use it, first, we have to create...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Hi @paul-pro, since Next supports both React 17 & 18, a possible solution might consist of calling React’s api through a wrapper which sniffs available React version.
Another approach could be restricting support to the most recent version.
@jasonwilliams Thanks, buddy. Should this issue be closed?