-
Notifications
You must be signed in to change notification settings - Fork 375
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
[Bug?]: Hydration Error Occurs When Adding New Route #1286
Comments
You mean a fresh load of the page on the new route right? Any client-side navigation would not involve hydration. I wonder if there is something up with server HMR. |
Thanks for your response! Yes, you're correct. I meant a fresh load of the page on the new route. Regarding your suggestion about the server HMR (Hot Module Replacement), I appreciate your insight. However, I must admit that my understanding of the core functionality is limited, so I'm not certain if there's an issue with the server HMR. As I'm relatively new to development, I'm still learning and may not be familiar with all aspects of the setup. I'd greatly appreciate any guidance or suggestions for improvement you can offer. I'd also like to invite you to take a look at my base setup on GitHub. If you have a moment, could you please review it and let me know if there are any mistakes or areas where I can improve? Here's the link: GitHub Link Thank you for your help! |
I faced the same issue but noticed something. The recently added route gives the hydration error until you reset the cache (refresh via So, @hemanthsaik, you fortunately don't have to restart the server every time. |
@angry-meow thank you buddy 😀 |
So it works but the browser is getting back previously cached versions of the JS and it isn't matching up. This isn't on Solid's side them most likely and on the build/HMR side. Thanks for the info @angry-meow. |
I am getting the same error except i have to reinstall the dependencies to get the new route.
|
I've been wrangling with this issue attempting to port a small project over from Astro, and refreshing the cache does work.
EDIT: Unsure how/why the above was functioning as described, as it now doesn't matter what my 404 file is named or whether it contains imports, it still errors regardless. I'll leave it here either way incase it's helpful to anyone |
This is still the case. Steps to reproduce:
Then:
The new link will appear via HMR, but clicking it will show a 404. Reloading in the browser will show hyrdation error: It does load the new route if:
|
I have been experiencing this as well. The only way to reproduce it consistently is to add a new route. It doesn't matter if the dev server is running when the new route is added or not. Interestingly, after adding the new route and navigating to it I almost always get routed to the catch-all route (page not found). After navigating away and back to the new page a few times I get the hydration error. If I disable the cash the problem goes away. Tried Chromium, Chrome and FireFox. All have the same behavior. |
FWIW, I've been hitting quite a few HMR and hydration errors. Some or all of that is me as I am new to using SSR and hydration requirements. I've been disabling ssr at times to make progress in other areas while I continue this learning curve. Forced reload and clearing cache...helpful workaround. I've stumbled on some of that to keep going. Sharing a solution to clear cache by hooking
...
// hot module reloading during dev
// override so we can clear the apollo client cache
// otherwise, we get sticky cache issues for graphql endpoints
//
{
const hot: ViteHotContext | undefined = import.meta.hot;
if (hot) {
hot.accept(); // accept the HMR update
hot.dispose(() => {
console.log('Resetting GraphQL cache due to HMR...');
apolloClient
.resetStore()
.then(() => console.log(' ...done. GraphQL cache reset.'))
.catch(err => console.error(' ...failed. GraphQL cache not reset.', err));
});
}
}
const App: ParentComponent<{}> = () => (
<ApolloProvider client={apolloClient}>
<SessionProvider>
<Router root={(props: RouteSectionProps) => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
</SessionProvider>
</ApolloProvider>
);
export default App; |
I'm writing a tutorial where I add and remove routes frequently, so a good test of this fix. I'm happy to report that since I started using the packages with this fix I haven't had a single problem in the past 2 days 👍 |
@vibhuvV It's more likely to be related to the most recent hydration key optimization. Please open another issue with the code where the hydration mismatch occurs. To track it down, you can try to look for the most similar key in the DOM tree. The provided screenshot might already have it but the actual (user) code is necessary. |
Duplicates
Latest version
Current behavior 😯
The issue with Solid Start is that whenever I add a new route, it causes a hydration error. This means that instead of the new route displaying correctly, the app doesn't load it properly. I have to restart the development environment every time I add a new route to get it working again.
Expected behavior 🤔
The expected behavior is that when I add a new route to my Solid Start application, it should display correctly without any errors. I should be able to navigate to the new route seamlessly, and the application should continue to function smoothly without needing to restart the development environment.
Steps to reproduce 🕹
Steps:
Context 🔦
No response
Your environment 🌎
No response
The text was updated successfully, but these errors were encountered: