Skip to content
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

Closed
2 tasks done
hemanthsaik opened this issue Jan 26, 2024 · 13 comments · Fixed by nksaraf/vinxi#333
Closed
2 tasks done

[Bug?]: Hydration Error Occurs When Adding New Route #1286

hemanthsaik opened this issue Jan 26, 2024 · 13 comments · Fixed by nksaraf/vinxi#333
Labels
bug Something isn't working vinxi related to vinxi

Comments

@hemanthsaik
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the 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.
Screenshot 2024-01-26 at 10 22 26 AM

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:

  1. Start the Solid Start development environment.
  2. Navigate to the application.
  3. Add a new route to the application.
  4. Attempt to access the newly added route.
  5. Observe that a hydration error occurs, preventing the route from displaying correctly.
  6. Note that the application becomes unresponsive and requires a restart of the development environment to resolve the issue.

Context 🔦

No response

Your environment 🌎

No response

@hemanthsaik hemanthsaik added the bug Something isn't working label Jan 26, 2024
@ryansolid
Copy link
Member

ryansolid commented Jan 26, 2024

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.

@hemanthsaik
Copy link
Author

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!

@angry-meow
Copy link

angry-meow commented Jan 30, 2024

I faced the same issue but noticed something.

The recently added route gives the hydration error until you reset the cache (refresh via Ctrl + Shift + R or select Disable cache in the DevTools' Network tab).

So, @hemanthsaik, you fortunately don't have to restart the server every time.

@hemanthsaik
Copy link
Author

@angry-meow thank you buddy 😀

@ryansolid
Copy link
Member

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.

@ryansolid ryansolid added the vinxi related to vinxi label Feb 5, 2024
@sudhanv09
Copy link

I am getting the same error except i have to reinstall the dependencies to get the new route.

"@solidjs/router": "^0.13.1",
"@solidjs/start": "^1.0.0-rc.0",
"solid-js": "^1.8.16",
"vinxi": "^0.3.10"

@alexpmac
Copy link

alexpmac commented Apr 12, 2024

I've been wrangling with this issue attempting to port a small project over from Astro, and refreshing the cache does work.
However in testing I've noticed that it only exhibits the hydration mismatch issue when a couple of things are true:

1. When the 404 route file is named [...404].tsx
2. When that file component is importing and using another component within

Renaming the file to [...NotFound].tsx while keeping the imported component has no issues, along with keeping the file named [...404].tsx but removing any imported components within

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

@aellerton
Copy link

This is still the case.

Steps to reproduce:

pnpm create solid@latest
# name: solid-bug-minimal
# solid-start: yes
# template: basic
# typescript: yes

cd solid-bug-minimal
pnpm install
code .   # or any editor of your choice
pnpm dev

Then:

  • load http://localhost:3000 - all works fine
  • add file src/routes/contact.tsx copying/modifying content from about.tsx
  • update app.tsx with a link to it the contact page.
  • save files in the editor

The new link will appear via HMR, but clicking it will show a 404.

Reloading in the browser will show hyrdation error:
image

It does load the new route if:

  • Stop the dev server and restart
  • control+shift+F5 (in Chrome Windows) to force clear of cache.

@klequis
Copy link

klequis commented May 13, 2024

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.

@billmartschenko
Copy link

billmartschenko commented May 29, 2024

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 ViteHotContext.dispose. In my case, I'm clearing the GraphQL cache. I wonder if that can be extended to clear more.

src/app.tsx

...
// 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;

ryansolid added a commit that referenced this issue Jul 16, 2024
@klequis
Copy link

klequis commented Jul 19, 2024

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
Copy link

vibhuvV commented Jul 26, 2024

Not sure if it is related to the same thing or not but I am still facing this issue.
These are my dependencies

  "dependencies": {
    "@solidjs/router": "^0.14.1",
    "@solidjs/start": "^1.0.6",
    "solid-js": "^1.8.19",
    "vinxi": "^0.4.1"
  },

Screenshot 2024-07-26 at 11 06 27 PM

Edit: If it helps this is the screenshot with orignal source
start-screenshot (1)

@mdynnl
Copy link

mdynnl commented Jul 26, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vinxi related to vinxi
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants