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]: Error: Unrecoverable Hydration Mismatch. No template for key: 0-0-0-0-0-0-0-0-0-1-0-0-4-0-1-1-0-0-1 #1056

Closed
2 tasks done
wakaztahir opened this issue Sep 10, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@wakaztahir
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

I am experiencing this issue #532 , when I use Dynamic component

Here's the codebase : https://github.com/Qinetik/Anique

To experience the error, You need to turn on ssr in vite config in demo, that's it as soon as you turn on ssr you start getting the error, There's a ErrorBoundary which catches this error and displays it here
https://github.com/Qinetik/anique/blob/5107c7cad73c8de3f5311882efe269ea7d24b1e0/styled/src/base.tsx#L170

so if you remove this Dynamic component, the error is gone but also is the site because the whole site uses this

The website works completely when ssr : false

The project is configured, not that big, pnpm updated, everything wired good, run start in the root folder
commit https://github.com/Qinetik/anique/tree/5107c7cad73c8de3f5311882efe269ea7d24b1e0

so how can I fix it ?

@ryansolid

Expected behavior 🤔

It should work

Steps to reproduce 🕹

I've given the repo with commit hash

Context 🔦

Make a static website with static Adapter with my UI component library, that'll publish on github

Your environment 🌎

solid 1.7.11
solid-start : ^0.3.5
@wakaztahir wakaztahir added the bug Something isn't working label Sep 10, 2023
@wakaztahir
Copy link
Author

wakaztahir commented Sep 10, 2023

I have figured why this error is happening

Here You called getNextElement() without any arguments https://github.com/solidjs/solid/blob/f79ba4d9087d74ef7e55fd0dc336c98ce2ec8526/packages/solid/web/src/index.ts#L135C43-L135C57

getNextElement() is imported from client.ts which exports everything from dom-expressions here
https://github.com/solidjs/solid/blob/f79ba4d9087d74ef7e55fd0dc336c98ce2ec8526/packages/solid/web/src/client.ts#L1

and is defined in
https://github.com/ryansolid/dom-expressions/blob/8cdb1f14ec82b944147ebc2a2cb7ce20b6e73fab/packages/dom-expressions/src/client.js#L233C1-L245C2

No template argument has been passed to getNextElement but in getNextElement definition, it does make a check for the template argument

@ryansolid
Copy link
Member

Some elements will not have a template in some cases like dynamic. I did this to prevent creating extra DOM nodes as the passed in template should never be hit. It only hits this code path if you are currently hydrating and will only error if there is a mismatch. So while this is why it errors and doesn't try to client render it also means that hydration has already failed at this point for another reason.

Understanding what you posted it's the Dynamic Component inside the main body of ErrorBoundary, not the one in the fallback? So for some reason at the point of creating that Dynamic component there is a mismatch. Which suggests that something above it is already off.

Out of curiosity can you turn your element into a function instead of creating it above. Then calling it where you insert. That would be the first thing I'd do because its possible that the mismatch is caused by some out of order inconsistency here. It suggests a bug in Solid but this will help narrow it down.

@wakaztahir
Copy link
Author

wakaztahir commented Sep 11, 2023

@ryansolid I've managed to create a library with the hydration error still happening everywhere in my code by stripping away emotion cache logic, It has helped to basically ignore this error, With this hydration error now, It only appends the hk attributes to the generated html which is kinda annoying html.

Now I'll be stripping even more and creating a very basic function & maybe another issue to report another error I've found

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

No branches or pull requests

2 participants