-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Importing a component in both _app.js and a page duplicates component css #20203
Comments
Same issue. This is preventing me from using next for future projects. Could you please advise when this will be fixed? |
Why Next team ignores such a big problem? This is just unreal to use Next with this bug. Very disappointing, because of Next has no competitors now. |
I'm not incredibly experienced with next but I feel like the example posted by OP is abusing the purpose of |
My situation:
I don't think, that using common layout component inside each page is a good idea, because it will be recreated at each page. |
The approach I mentioned is a standard approach, as shown in the official examples. Example page with common Layout component: https://github.com/vercel/next.js/blob/f06c58911515d980e25c33874c5f18ade5ac99df/examples/blog-starter/pages/index.js Here's the Layout component: https://github.com/vercel/next.js/blob/f06c58911515d980e25c33874c5f18ade5ac99df/examples/blog-starter/components/layout.js I highly doubt there's any significant perf issues here. There'll certainly be no dom thrashing as React is doing it's vdom diffing, and it really doesn't take much to re-render the common components on page navigation. |
To clarify, while this still could be a bug, i'm just proposing a workaround. |
It's not abusing in any way, since this is something documented in the section about "Custom App" in the official docs
And there is an example with a Layout component applied in _app.js as well |
Thanks, I agree, based on the docs it's not an abuse. This is a straight-up bug. I don't see any problems with the workaround though. Btw I don't have a strong opinion about this, just trying to help folks out. |
Maybe could be a workaround, but in our case here we've already had an abstraction for a Layout component implemented inside _app.js applied in several projects. We have stared to experience this behavior in a transition from the legacy |
My workaround, for now, is to just import my Layout component on each page. |
@ijjk @timneutkens @Timer, is anybody home? :) |
While, we're all waiting for official fix. Did someone found temporary solution ? |
Guys, solution for me:
|
@ListeH 's solution cleaned up my styles, but unfortunately they're still in the wrong order. Edit: My project was appending another set of styles in |
This might be fixed by webpack 5 / next.js 11, due to the use of |
@sokra It's fixed by next@11! I've updated the live example. Thank you! |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
A component css is duplicated when imported by both _app.js and any page.
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
Repository: https://github.com/guilhermehn/next-duplicate-css-repro
Live example: https://next-duplicate-css-repro.vercel.app/
Expected behavior
The component css should not be duplicated.
Screenshots
System information
Additional context
The text was updated successfully, but these errors were encountered: