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.
Hard Refresh in Browser Produces Warning and Incorrect CSS
See original GitHub issueWe are attempting to use react-socks with Next.js. However, when a hard refresh is executed in the browser we get the wrong CSS applied to the markup as there seems to be a className mismatch. This issue is similar to the issue produced by Next.js when used with ‘styled-components’ if babel is not configured correctly. However, we are using an external sass file for the styling and not styled-components. Below is the warning from browser console when wrong className (add CSS) is applied. In this case, the client is using a mobile user-agent but the response from the server is for a desktop request. Initial requests work as expected, this issue only happens on refresh.
index.js:1 Warning: Prop className did not match. Server: “Example-style__desktopUA___3ICHb” Client: “Example-style__mobileUA___2vKnj”
PDF of sample code.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I have created a screen cast which illustrates what we see in our testing where refreshing a mobile user-agent defaults to the desktop className/CSS but never corrects itself to the mobile className/CSS as set in the mobile breakpoint. The code utilized in this cast is the same as what was provided in the pdf. The CSS for the desktop breakpoint is blue. The CSS for the tablet break point is red, and mobile is orange. If we are doing something incorrect in our implementation of this package, please let us know. Thanks.
Link: https://drive.google.com/file/d/1LlYvIiKUr-3Hktgj6AHNtORQWYsI4hok/view
I understand that adjusting the default may rectify the ‘flicker’ effect when a page is re-rendered due detecting the browser’s user-agent; however, in this case the view is set to the default (in this case desktop) and never re-renders correctly. In our testing using chrome tools, if we refresh while having the user-agent set to any of the mobile devices, the breakpoint defaults to desktop but does not correct itself. It remains desktop which is unexpected. All that said we think this is a great library and would love to get it to work for us. Thanks for your work on this.