S
SolidJSβ€’8mo ago
Sphere

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
Sphere
Sphereβ€’8mo ago
bumping this
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
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/>?
Sphere
Sphereβ€’8mo ago
@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
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
does this ring a bell @𝕒𝕣𝕀𝕙 ?
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
StackBlitz
Astro Blog Example (forked) - StackBlitz
Run official live example code for Astro Blog, created by Withastro on StackBlitz
𝕒𝕣𝕀𝕙
yeah it does
Sphere
Sphereβ€’8mo ago
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
Sphere
Sphereβ€’8mo ago
nope yeah we do have that
Sphere
Sphereβ€’8mo ago
No description
Sphere
Sphereβ€’8mo ago
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
Sphere
Sphereβ€’8mo ago
thats interesting yes a new context is being made
Sphere
Sphereβ€’8mo ago
No description
Sphere
Sphereβ€’8mo ago
No description
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
o wait ye now i remember again, the fix is to create the context in a separate file?
Sphere
Sphereβ€’8mo ago
first log is working state, second is not working state lets try
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
yesss i forgot that we fixed it last time πŸ˜…
Sphere
Sphereβ€’8mo ago
No way It works Thats crazy Thanks guys
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
ur welcome if u get another question unanswered at some point u can ping me
Sphere
Sphereβ€’8mo ago
thank you
𝕒𝕣𝕀𝕙
same preferably astro related tho
Sphere
Sphereβ€’8mo ago
everything Im doing is astro related now one project im building is solid + astro, the other is vue + astro
bigmistqke 🌈
bigmistqke πŸŒˆβ€’8mo ago
their discord is super helpful too
Sphere
Sphereβ€’8mo ago
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
lxsmnsyc
lxsmnsycβ€’8mo ago
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 πŸ‘€
Sphere
Sphereβ€’8mo ago
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
lxsmnsyc
lxsmnsycβ€’8mo ago
btw seems like the StackBlitz is working for me though?
Sphere
Sphereβ€’8mo ago
there are some reproduction steps, you need to change something in the jsx and save
lxsmnsyc
lxsmnsycβ€’8mo ago
ah I missed the instruction mb then it's an HMR thing
Sphere
Sphereβ€’8mo ago
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
lxsmnsyc
lxsmnsycβ€’8mo ago
yes that's the solution or use granular
Sphere
Sphereβ€’8mo ago
I did try that, didnt work out
lxsmnsyc
lxsmnsycβ€’8mo ago
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
Sphere
Sphereβ€’8mo ago
some super secret solid hmr setting lol
lxsmnsyc
lxsmnsycβ€’8mo ago
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
lxsmnsyc
lxsmnsycβ€’8mo ago
I updated Page.jsx, seems to work fine to me. Not sure what I expected
Sphere
Sphereβ€’8mo ago
Oh you did it in Page I tried it in Routed
lxsmnsyc
lxsmnsycβ€’8mo ago
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
Sphere
Sphereβ€’8mo ago
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
lxsmnsyc
lxsmnsycβ€’8mo ago
Page requires useTest from Routed. Routed requires Page component from Page. They require each other
Sphere
Sphereβ€’8mo ago
oh right
lxsmnsyc
lxsmnsycβ€’8mo ago
Don't do cyclic modules and you'll be able to reduce/solve some known problems, bundler or HMR-wise
Sphere
Sphereβ€’8mo ago
got it