Hydration fails silently ?

Hi,

I'm trying out the latest tanstack start and I'm facing a weird issue.
My route is defined like this:

export const Route = createFileRoute("/projects")({
  component: Gallery,
  loader: async () => {
    const projects = await getAllProjectsWithImagesServer();
    return { projects };
  },
});

export const Route = createFileRoute("/projects")({
  component: Gallery,
  loader: async () => {
    const projects = await getAllProjectsWithImagesServer();
    return { projects };
  },
});

And in my Gallery component, I'm getting the loaderData and displaying a list of project. When I click on a project, it's supposed to open a model with project details, but the onClick never get triggered. I trying debugging it and I never see any console.log I put in, appart from:

export default function Gallery() {
  const { projects } = useLoaderData({ from: "/projects" });
  const [selectedProject, setSelectedProject] =
    useState<ProjectWithImages | null>(null);

  const isHydrated = useHydrated();

  console.log("isHydrated", isHydrated);

  useEffect(() => {
    console.log(isHydrated);
  }, [isHydrated]);

  return (
    <div className="py-20 px-4">
    ...

export default function Gallery() {
  const { projects } = useLoaderData({ from: "/projects" });
  const [selectedProject, setSelectedProject] =
    useState<ProjectWithImages | null>(null);

  const isHydrated = useHydrated();

  console.log("isHydrated", isHydrated);

  useEffect(() => {
    console.log(isHydrated);
  }, [isHydrated]);

  return (
    <div className="py-20 px-4">
    ...

I can see the first isHydrated false in the terminal when my dev server is launched. I just don't get why I doesn't see it set to true in my useEffect, and more importantly why I'm not getting any interaction with my page. I don't see any error messages in the console...

Could you guys help me out please ?

TanStack•4mo ago•

3 replies

urgent-maroon

Hydration fails silently ?

Hi,

I'm trying out the latest tanstack start and I'm facing a weird issue.
My route is defined like this:

export const Route = createFileRoute("/projects")({
  component: Gallery,
  loader: async () => {
    const projects = await getAllProjectsWithImagesServer();
    return { projects };
  },
});

export const Route = createFileRoute("/projects")({
  component: Gallery,
  loader: async () => {
    const projects = await getAllProjectsWithImagesServer();
    return { projects };
  },
});

export default function Gallery() {
  const { projects } = useLoaderData({ from: "/projects" });
  const [selectedProject, setSelectedProject] =
    useState<ProjectWithImages | null>(null);

  const isHydrated = useHydrated();

  console.log("isHydrated", isHydrated);

  useEffect(() => {
    console.log(isHydrated);
  }, [isHydrated]);

  return (
    <div className="py-20 px-4">
    ...

export default function Gallery() {
  const { projects } = useLoaderData({ from: "/projects" });
  const [selectedProject, setSelectedProject] =
    useState<ProjectWithImages | null>(null);

  const isHydrated = useHydrated();

  console.log("isHydrated", isHydrated);

  useEffect(() => {
    console.log(isHydrated);
  }, [isHydrated]);

  return (
    <div className="py-20 px-4">
    ...

Hydration fails silently ?

Similar Threads

Hydration fails silently ?

Similar Threads

Similar Threads

Similar Threads