Styles dissapear with <a> or refresh
Answered
Pyr0Lover posted this in #help-forum
I am having a weird issue where the tailwind styles on my /map page will dissappear when the page is refreshed or when navigating with an <a> (as it causes refresh) it seems to only disappear from this page, and I cant figure why it loads correctly but disapears with refresh?
When I navigate somewhere else using <Link> the styles come back...
It doesn't seem to be the map's page content, as I removed all of it and it this still persits, which makes it weirder since it only seems to happen on this page?
When I navigate somewhere else using <Link> the styles come back...
It doesn't seem to be the map's page content, as I removed all of it and it this still persits, which makes it weirder since it only seems to happen on this page?
Answered by Pyr0Lover
Solution for my case:
I had an (overview) folder inside /app, which had a second layout.tsx. And inside of that file I was importing css for some reason, this is what caused conflicts.
import '@/app/ui/global.css';
I had an (overview) folder inside /app, which had a second layout.tsx. And inside of that file I was importing css for some reason, this is what caused conflicts.
import '@/app/ui/global.css';
5 Replies
To be a bit more specific, if I refresh the page directly, after loading, the styles remain, only after navigating to a page (with <Link>) and then back to the map and refreshing do the styles dissapear. Or if I simply navigate with <a> and then back, they will also be gone, since <a> auto refreshes so its one less step to reproduce...
this might be related with my internationalization middleware. I am using a >CustomLink> for my navBar:
import Link from 'next/link';
import { i18n } from '@/i18next.config';
interface CustomLinkProps {
href: string;
lang: string;
children: React.ReactNode;
[key: string]: any;
}
export default function CustomLink({ href, lang, ...props }: CustomLinkProps) {
const isDefaultLang = lang === i18n.defaultLocale;
const path = isDefaultLang ? href :/${lang}${href};
return <Link href={path} {...props} />;
}and this is the middleware
not sure if its exactly what's causing the issue, but it seems to point that way
Solution for my case:
I had an (overview) folder inside /app, which had a second layout.tsx. And inside of that file I was importing css for some reason, this is what caused conflicts.
import '@/app/ui/global.css';
I had an (overview) folder inside /app, which had a second layout.tsx. And inside of that file I was importing css for some reason, this is what caused conflicts.
import '@/app/ui/global.css';
Answer