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.

Styles unsyncing (?) with NextJS

See original GitHub issue

Hi everyone,

I’m struggling for more than 48h with this issue, so I decided to overpass the feeling this is a specific issue from my side and to leverage your experience and brains as mine is 🤯

FYI, my setup is NextJS + TypeScript + Chakra UI.

I have some kind of “styling unsyncing” that appeared recently, and I’m unable to find the cause.

What I noticed though is the weird amount of styles piling up. My first question would be: is this normal? The subsidiary question would be: what would be the cause?

Screenshot 2021-04-09 at 09 55 52 Screenshot 2021-04-09 at 09 56 18

Another strange thing is when I’m hovering a button, the styling of the drawer breaks:

ezgif-7-346d530153f5

And finally, from one page transition to another (using next/link), scroll is (sometimes…) disabled/not working.

Unfortunately, I can’t share the repo as it is private and not mine. I tried to reproduce the issue in a sandbox without success…

I know animated gif is not the greatest to help debugging, but I’m willing to share any code snippet you would suspect being the problem ! 🙏 🙏

🌍 System information

Software	Version(s)
Chakra UI	1.3.3
Browser	Chrome
Operating System	MacOS

Issue Analytics

State:
Created 2 years ago
Comments:15

Top GitHub Comments

3reactions

payapulacommented, Apr 10, 2021

@binajmen Based on my experience with Chakra and NextJs

is this normal?

Yes this is normal.

what would be the cause?

The Styles that we see in the dev tools are from Chakra’s default theme

one page transition to another (using next/link)

If you have custome functional component that wraps the link <a></a> then you need to pass the ref from next/link via the props passHref - Read about this on ref forwarding in the next docs

To reproduce your problem have you tried this template ? NextJS TypeScript CodeSandbox template

2reactions

violabgcommented, May 25, 2021

I have a project that uses react-select and Have a similar problem, it is definitely related to react-select and there emotion package been in conflict with chakra-ui. Basically the pages that use react-select are working fine, if you go to a page that doesn’t use it, still works, but if you reload that page, the style breaks. I didn’t find a solution yet to use react-select with chakra-ui and next-js.

PS. it only happen on yarn build, works on yarn dev

Top Results From Across the Web

Advanced Features: Next.js Compiler

The Next.js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for...

Styling: CSS-in-JS - Next.js beta docs

A style registry to collect all CSS rules in a render. · The new useServerInsertedHTML hook to inject rules before any content that...

Basic Features: Built-in CSS Support - Next.js

These styles ( styles.css ) will apply to all pages and components in your application. Due to the global nature of stylesheets, and...

Styling Next.js with Styled JSX

Global Styles - Assets, Metadata, and CSS | Learn Next.js

Global Styles. CSS Modules are useful for component-level styles. But if you want some CSS to be loaded by every page, Next.js has...