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

[hemanthsaik]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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.

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

[ryansolid]

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]

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]

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]

@angry-meow thank you buddy 😀

[ryansolid]

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.

[sudhanv09]

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]

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]

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:

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]

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.