Router nested in Context breaks in Astro
Hey guys I finally made a reproduction regarding <Router> not working inside <Context> in an astro project
https://stackblitz.com/edit/withastro-astro-rfcdyu?file=src%2Fcomponents%2FRouted.jsx / https://github.com/aspheresedge/astro-solid-router
If someone could point me in the right direction / or tell me who to bring this up with, would appreciate it
To reproduce: navigate to /nested, then go to your code while in dev more and change and save any of the .jsx components
And then reload the page, and check the console - ui should not load at all in /reload, should be full white
GitHub
GitHub - aspheresedge/astro-solid-router
Contribute to aspheresedge/astro-solid-router development by creating an account on GitHub.
47 Replies
bumping this
mm interesting. i think it's a hmr problem. i had similar issues with react + astro + context + hmr, do not know if they are related.
or does it only happen with
<Router/>?@bigmistqke Context itself works, Router is the problem here. I am suspecting hmr too but Iβm not technical enough to do the debugging on that front
But itβs weird too it seems like something on the server is breaking because to fix it it requires a full server restart
does this ring a bell @ππ£π€π ?
mm, when I try it without
<Router/> I get the same bug: https://stackblitz.com/edit/withastro-astro-k4za2r?file=src%2Fcomponents%2FRouted.jsxStackBlitz
Astro Blog Example (forked) - StackBlitz
Run official live example code for Astro Blog, created by Withastro on StackBlitz
yeah it does
Now thats interesting...
I know I use some Contexts in other components... but they're nested in at least one more solid component
I wonder if putting <Routed> in a wrapper would solve it
could you add a console.log to the file that creates the context
basically to let you know whether a new one was created
thats what it was the last time
nope
yeah we do have that
its failing to make a context
oh sorry
the file that makes the context
yes
what i think is happening is this - after a refresh the context that provider is referring to and the context that the consumer is referring to, become different
since a new one is instantiated on hmr
thats interesting
yes a new context is being made
o wait ye now i remember again, the fix is to create the context in a separate file?
first log is working state, second is not working state
lets try
yesss
i forgot that we fixed it last time π
No way
It works
Thats crazy
Thanks guys
ur welcome
if u get another question unanswered at some point u can ping me
thank you
same
preferably astro related tho
everything Im doing is astro related now
one project im building is solid + astro, the other is vue + astro
their discord is super helpful too
gonna see if i can get a react + astro going too
I was expecting vue to have crap performance, but surprisingly with astro it was pretty good
so interested to see what happens with react
yep
100% this is a duplicate SolidJS problem. Try checking the lockfile if there's any multiple copies. Astro usually suffers that problem because iirc it's not set as a peerDependency
oh well I guess it's long changed: https://github.com/withastro/astro/blob/main/packages/integrations/solid/package.json#L40-L47
what if you could do astro + react + solid + vue π
So its good right
Maybe on separate pages for separate components ... never on the same page lmao
Might be a fun blog post anyways though
I should try making a very performant kitchen sink application
5 cms' 5 ui frameworks 5 css frameworks on the same astro app
btw seems like the StackBlitz is working for me though?
there are some reproduction steps, you need to change something in the jsx and save
ah I missed the instruction mb
then it's an HMR thing
Yeah i think arsh was on the money
a second context gets made
on hmr reload
breaking the context into a separate file fixes it
yes that's the solution
or use granular
I did try that, didnt work out
GitHub
Contexts become undefined during HMR Β· Issue #15 Β· solidjs/solid-re...
It seems during HMR any useContext() becomes undefined, potentially breaking components that trust on a context being always unavailable or set up without defaults, which in turn breaks the hot rel...
whats granular
some super secret solid hmr setting lol
Solid's HMR has a granular mode that isn't enabled by default. I put it in that way because the solution is pretty much experimental. It works, but i'm not 100% confident
basically in granular mode, instead of replacing all of the components and context in the file that changed, it will only replace components that changed code-wise
ahh, thats super neat! yeah that would work
I updated Page.jsx, seems to work fine to me. Not sure what I expected
Oh you did it in Page
I tried it in Routed
ah well, the instruction was unclear
Okay tried it in Routed
Okay maybe the additional problem
is you have cyclic modules
better defer from that kind of practice
Issue with doing it in Page is -- there will be lots of routes so preferably sholdnt have to add it in each one
whats that
Page requires useTest from Routed. Routed requires Page component from Page. They require each otheroh right
Don't do cyclic modules and you'll be able to reduce/solve some known problems, bundler or HMR-wise
got it