-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Styling broken on route navigation when using vanilla-extract #53858
Comments
We have exact same issue on In our project this bug reproduces only on hard navigation to dynamic segment that throws I can see these lines, containing needed CSS chunk in the response
and after navigation I can see this script
But all the CSS in head is
Note that |
@ssijak I've traced this bug to If not, I'll just open a new issue :) |
We are encountering this issue as well. It happens intermittently - sometimes the module styles load, sometimes they do not. Also started happening after upgrading to |
I have the same issue, in all nextjs versions... I'm starting to suspect that this might be a vanilla-extract issue. What version are you using? |
Definitely vanilla-extract issue vanilla-extract-css/vanilla-extract#1152 |
@hazzo It is NextJS issue in newer versions, any styling solution that does not use one big CSS file which is imported at the top level suffer from this, which is I would wager large percentage of projects |
But since which version? I tested with |
Can confirm the issue for 14.1.0 with App Router. // next.config.js
const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig = {
webpack(config, { nextRuntime }) {
if (!nextRuntime) {
config.optimization.splitChunks.cacheGroups = {
...config.optimization.splitChunks.cacheGroups,
styles: {
name: "styles",
type: "css/mini-extract",
chunks: "all",
enforce: true,
},
};
}
return config;
},
};
module.exports = withVanillaExtract(nextConfig); |
I have applied this but i am still facing the issue , on hard reload the styling works fine but on navigation the style breaks . I am on nextjs 14.2.3 |
Are you using parallel routes? Next has a css loading issue for client navigation when using parallel routes. You could try updating to 14.3.0-canary.48 and see if the problem persists. |
no, i just switched to tailwind instead and everything works fine . it's just the external css files are not working properly . |
this works. I'm using pages router with Nextjs 14.2.4 |
thanks just figured out the fix, it was my mistake all working good now |
What was your fix @amar1795 ? |
I am not sure but I guess I was loading CSS in a single Chunk hence the issue was happening . this happened to fix it : webpack(config, { nextRuntime }) { |
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.5.0: Thu Jun 8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000 Binaries: Node: 18.12.1 npm: 8.19.2 Yarn: 1.22.19 pnpm: 7.18.1 Relevant Packages: next: 13.4.14-canary.1 eslint-config-next: 13.4.5 react: 18.2.0 react-dom: 18.2.0 typescript: 4.9.4 Next.js Config: output: N/A
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue or a replay of the bug
https://share.cleanshot.com/2HmrBYgs
To Reproduce
Use only pages dir, implement styling via vanilla-extract, navigate between pages using router
Describe the Bug
Styles are broken after navigating to a different page, but on full page loads they are fine
On version
"next": "13.4.5",
everything works fine, but after that version where big push was made with a lot of optimizations for the app dir, a lot of things started breaking for us, like styling as seen in the video and hot reload not working (any little change reloading the whole page always) so we need to stay on 13.4.5Expected Behavior
Styles should be good all the time
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: