CSS Not Loading When Rapidly Switching Routes
I recently came across a bug on my website where rapidly switching to different routes will not load the CSS of the page and hence looks like this. I have found something similar to this although in NextJS, however idk how to get rid of this bug since i don't have a lot of information to go by
GitHub
Issues · vercel/next-plugins
Official Next.js plugins. Contribute to vercel/next-plugins development by creating an account on GitHub.
30 Replies
ig nobody gives a shit
on how to provide hints to fix this
where is the link to the website?
rn its not hosted
ok, do you see any error loading the css?
wdym
where is the css coming from is it a file?
is there any errors when that file is loaded?
is it aborted ?
do you have any information that you think can help figuring out this bug?
if you provide some useful information someone might be able to suggests things
if this is not a common problem, you need to provide some more details
give me a sec
the closest thing i got to replicating it
is deleting all of the contents of App.css
when you inspect in devtools do you see a css file being loaded? in the network tab?
well there are some
but App.css along with some others
aren't loaded
they aren't present as
<style ... />is it for a specifc route that you see it ?
if you refresh does the css load for that route?
yes
yes for both?
for the second
for the first
when i go from one other route to another rapidly
it leads me up to the index route
for example if im switching from B to C, it switches to A and same for B to A or C to A
so it also goes to the wrong route?
ye
i tried to rapidly switch between
localhost/documentation `and localhost/about
which about leads to 404
then it switched me to just localhost/
if i do localhost/documentation with localhost/ same thingand for this to happen you need to do B to C to B quickly ?
or in your case let say
localhost/documentation localhost/about localhost/documentation
then it goes to localhost/
yes
and you mentioned somethign about 404 when does that happen and why?
for the 404 page, i just didn't define a route for about yet
tho its not that
so if you switch between routes without 404 you still see this?
yes
tho its from index to other route
also here is what it loads when this bug happens
so when this happen, it basically removes that app.css somehow?
does it also happen in a production build or just dev build?
i don't think i've tested for production build
let me see
for dev it does happen
yeah, just to isolate to see if it not something with vite or something
apparently it is something with vite
in production build it doesn't happen at all
so i guess we don't care
I guess it is less of a problem, and unless someone can find the reason for this
not much we can do about it
ye
at least good thing its in dev enviorement
and not production
i assume its bc im switching rapidly, some tasks get interrupted(including the CSS files)
then they try to resume
and they fail
yeah, I will assume something similar
somehow vite got overwhelmed / some race condition
exactly
btw sorry for the long delays
not a problem 🙂