useId hook gives different ids on server and client, leading to hydration error

[RndUsername]

As you can see in this StackBlitz, the console throws a hydration error in the newest version of waku, pointing to the id of the button. I have this problem since #1088 but I'm not sure if they are related.

[dai-shi]

Thanks for reporting. We should add a test to avoid such a regression.
Can you dig into it? Identifying which PR caused the regression would be helpful.
If you go to a PR, you will se "codesandbox-ci" message. Then, click "here" link and find "Local Install Instructions". It should work on StackBlitz too.

[RndUsername]

It seems like #1087 is the first one to have this error. I tested the following PRs (❌ are the ones having the error):

#1090 ❌
#1088 ❌
#1087 ❌

#1085 ✅
#1083 ✅
#1078 ✅

[dai-shi]

#1087 doesn't change the code. I think it's #1088 which is merged before #1087.
Thanks for testing!

[r4ai]

It seems that this issue is happening again.

Example of using useId with waku@0.26.0: https://stackblitz.com/~/github.com/r4ai/waku-use-id-issue

As shown in the example above, a hydration error occurs at the points where useId is used.

[dai-shi]

Thanks for reporting. Can you identify which version introduced it? I wonder why our test didn't catch it.

[r4ai]

From a quick test on my machine, a hydration error has started occurring in version 0.22.3. It didn't occur up before 0.22.2.

I'll investigate which commit is causing this now.

[r4ai]

It seems that the hydration error has started occurring since f731ef1:

51ee32eb285d9dbfd4ecc6dbec15cb6b4d8633c3 (2025-04-09): fix v0.22.2 again 3 - ✅ OK
82ab017661c8e7242be769e1f4d03c90f881e9f0 (2025-04-09): chore: use import.meta.dirname in tests (#1367) - ✅ OK
008787514fa979bed036422850f0b41c992e7bf5 (2025-04-10): rollup 4.39.0 (#1353) - ✅ OK
92758b9c72c2292a9883d1e727c0084148dd8d57 (2025-04-11): chore(test): increase timeout (#1368) - ✅ OK
9e4addfdacad95cbecfe6319cc19b29ed4c16946 (2025-04-14): chore: update declaration file in cssmodules example (#1369) - ✅ OK
f731ef1f1acbe76c93b02c65632dfa3d5094d7ea (2025-04-17): fix: 404 handling (#1371) - ❌ HYDRATION ERROR
aade84721cf18056e83d8e45fa5565c085205afd (2025-04-18): chore: update dependnecies (#1375) - ❌ HYDRATION ERROR
4aa4a920bd9576421d7d1c2bb98ce166a304a0c6 (2025-04-18): chore: update vite and other dependencies (#1376) - ❌ HYDRATION ERROR
bb52d3e1e36db2bcea903acbcf0d056eca03b74a (2025-04-19): v0.22.3 - ❌ HYDRATION ERROR

[r4ai]

As additional info, this hydration error seems to occur only on the development server; it doesn’t happen in the production build.

Maybe the commit f731ef1 caused the HTML structure to differ slightly between server and client in development, which could cause the hydration error.

[dai-shi]

Thanks for your investigation!
If you are interested in being challenged, could you look into why our current test doesn't fail? What's the difference between our current test and your stackblitz reproduction?

[r4ai]

OK, I’ll look into why the tests aren’t failing later (probably tonight or tomorrow).