Some component styles are unloaded/not loaded in development mode

[nur557]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

15.12.0

What browser are you using?

Firefox Developer Edition 92.0b6

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

There's two ways I'm experiencing this bug:

1. Leave the tab, come back to it after a while and some styles are broken.
2. Navigate through the app, land on some page and some styles are broken.

The problem is that some style tags in the header which hold component styles are not included.
In the first case, I come back to the page and there are less style tags (does next do some cleanup of styles when the app is in the background?).
In the second case as I'm navigating around and land on a page, some component's styles don't get included.

In both cases if I stay on the page the app refreshes. During testing this is very frustrating because app state is lost.

I can't see a clear pattern on which component styles are problematic neither can I find a sequence of pages to visit to always reproduce the bug. But it always happens after a few minutes top.

For styling, we're using component-level Sass via CSS Modules. I'm here for any further questions.

Expected Behavior

The right styles to be included at all times in dev mode.

To Reproduce

I really don't know how to reproduce this but I can send the codebase to a maintainer.

[nur557]

[jankaifer]

Is this still happening in next@canary?

[balazsorban44]

This issue has been automatically closed because it wasn't verified against next@canary. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.