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 16.10 broke Next.js/SSR applications

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior?

React 16.10.0 has broken all Next.js applications (and potentially other SSR solutions).

It appears you cannot hydrate in conjunction with a client-side <Suspense> component.

Expected to have a hydrated suspense instance. This error is likely caused by a bug in React. Please file an issue.

CodeSandbox: https://codesandbox.io/s/i66g1

What is the expected behavior?

Not entirely sure – I’m opening this issue to discuss. The provided example worked in React 16.9.0 (and prior releases containing Suspense).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react@16.10.0/react-dom@16.10.0 is broken. react@16.9.0/react-dom@16.9.0 works.

Issue Analytics

State:
Created 4 years ago
Reactions:24
Comments:10 (6 by maintainers)

Top GitHub Comments

18reactions

acdlitecommented, Sep 28, 2019

This is now fixed in v16.10.1.

7reactions

acdlitecommented, Sep 28, 2019

I believe technically we don’t support conditionally rendering a Suspense boundary when server rendering. It just happened to (accidentally) work before.

We’ll either fix so it matches the old behavior or provide a more graceful error or fallback behavior.

Top Results From Across the Web

react-hydration-error - Next.js

In general this issue is caused by using a specific library or application code that is relying on something that could differ between...

Unable to resolve dependency tree Reactjs - Stack Overflow

On your tinder-clone@0.1.0 application you currently have react@17.0.1 . This problem can be solved manually by just installing version of ...

React (JavaScript library) - Wikipedia

React is a free and open-source front-end JavaScript library for building user interfaces ... mobile, or server-rendered applications with frameworks like Next.js.

Persistent Layout Patterns in Next.js - Adam Wathan

Because this benefit was so heavily advertised, I was very surprised to find out that in many modern single-page application frameworks like ...

The Next.js Handbook – Learn Next.js for Beginners

Working on a modern JavaScript application powered by React is awesome until ... the app is broken up automatically by Next.js in several ......