HMR with client component seems flakey

[JesseKoldewijn]

When updating a client component, either the client or server component seems to get stuck in its previous state. From what I've found it seems to get resolved when restarting the dev server, but nothing other than that.

Example code of client component:

"use client";

import { Link } from "../core/Link";
import { Button } from "../ui/button";

import { useRouter_UNSTABLE as useRouter } from "waku";

const routes = [
    {
        path: "/route-1",
        title: "hello",
    },
    {
        path: "/route-2",
        title: "world",
    },
];

const ReproductionComponent = () => {
    const router = useRouter();
    const pathname = router.path;

    return (
        <div className="flex items-center justify-center gap-2">
            {routes.map((route) => {
                if (route.path === pathname) return null;
                return (
                    <Button key={route.title} asChild className="w-max">
                        <Link to={route.path}>{route.title}</Link>
                    </Button>
                );
            })}
        </div>
    );
};
export default ReproductionComponent;

In this component you only have to change a single className for instance to trigger a hydration error.

[JesseKoldewijn]

Ps. if further reproduction are required, I'd be happy to provide those 👍

[dai-shi]

Thanks for reporting. Let's see if @Aslemammad can take a look. Maybe he wants a full small reproduction.

[Aslemammad]

Yea, I'd like to have small repros, this way tackling this would be way easier.

[JesseKoldewijn]

Aight, I'll throw something together right away! 👍

[JesseKoldewijn]

Reproduction can fairly trivially be reproduced using the base template which is provided from the create waku cli call.

Repo with reproduction and dump of the log you should get can be found here: https://github.com/JesseKoldewijn/Waku-HMR-Desync