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.

useBreakpoint issues with SSR (eg Next.js)

See original GitHub issue

I came across a bug in my project yesterday and I think have now traced it to styled-breakpoints.

I’ve made a minimal reproduction which you can find at https://github.com/tremby/next-mq-bug

The main branch has the broken case, which is also deployed at http://next-mq-bug-1.surge.sh/

In this reproduction, I initialize a variable mobile, then in a try/catch block I run the useBreakpoint hook. I have to run it in a try/catch because window does not exist during server-side rendering, and it’s impossible to know how wide the user’s browser window is. Without the try/catch block, an error would be thrown here: https://github.com/mg901/styled-breakpoints/blob/master/react-styled/index.js#L9

Whichever version of the display initialized mobile to the value matching the width of the viewport at load time, displays correctly. The other version displays incorrectly. The wrong styled-components classes have been added to the wrong elements. On resizing so that the media query flips, the version which displayed correctly still displays correctly. The version which started out wrong is still wrong.

Here are some screenshots.

After hitting refresh at a narrow width:

Screen Shot 2020-12-04 at 20 16 15

Without refresh, after then resizing to be wider:

Screen Shot 2020-12-04 at 20 16 25

After hitting refresh at that wider width:

Screen Shot 2020-12-04 at 20 16 29

And then after resizing to be narrower again without hitting refresh:

Screen Shot 2020-12-04 at 20 16 36

I then made my own implementation of useBreakpoint (albeit limited to a hard-coded media query) and I do not get the same bug. In my version I don’t actually need the try/catch block either, since everything which tries to use window happens in useEffect, and effects don’t run at SSR time. That version is on my “without-styled-breakpoints” branch, and is deployed here: http://next-mq-bug-2.surge.sh/

If you are open to a rewrite of your useBreakpoint function I could give it a shot. Or do you think the bug is actually elsewhere, like in styled-components or in Next.js?