question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React 18 support: use hydrateRoot

See original GitHub issue

With 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:closed
  • Created a year ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
toomuchdesigncommented, Apr 21, 2022

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.

0reactions
wenjoycommented, Jun 29, 2022

@jasonwilliams Thanks, buddy. Should this issue be closed?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found