solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

[Bug?]: hydration fails silently without an error

Open huseeiin opened this issue 10 months ago • 8 comments

Duplicates

  • [x] I have searched the existing issues

Latest version

  • [x] I have tested the latest version

Current behavior 😯

no error in console, but hydration fails expectedly

Expected behavior 🤔

TypeError: global is not defined

Steps to reproduce 🕹

console.log(global);

export default function Home() {
  return <button onClick={() => console.log("not interactive")}>Click</button>;
}

Context 🔦

No response

Your environment 🌎


huseeiin avatar Feb 13 '25 20:02 huseeiin

I am facing the same problem. for some reason the click event is not working.

ankurpowar avatar Feb 15 '25 15:02 ankurpowar

so I had imported a server function into my component and when I removed it then click event started working. basically , I removed the following line: import { getUser } from "~/lib/auth";

but i need to use getUser in my component. there is no problem with the server function itself. I can get User info perfectly.

ankurpowar avatar Feb 15 '25 15:02 ankurpowar

so I had imported a server function into my component and when I removed it then click event started working. basically , I removed the following line: import { getUser } from "~/lib/auth";

but i need to use getUser in my component. there is no problem with the server function itself. I can get User info perfectly.

make sure lib/auth has "use server" at the top and only exports functions

huseeiin avatar Feb 15 '25 15:02 huseeiin

@huseeiin is this still an issue? Im not sure you have access to global in that context

brenelz avatar Mar 04 '25 03:03 brenelz

@huseeiin is this still an issue? Im not sure you have access to global in that context

i know, the point is i expect an error like "global is not defined" in the browser for better dx and debugging

huseeiin avatar Mar 04 '25 07:03 huseeiin

when i put it in the component, it throws an error as expected:

export default function Home() {
  console.log(global);

  return <button onClick={() => console.log("not interactive")}>Click</button>;
}

huseeiin avatar Mar 04 '25 07:03 huseeiin

Okay to answer this, console.log(global) as a module-level call would cause a global error, which stops JS execution in general, there's no hydration error because that error isn't part of the hydration perse, heck, hydration wouldn't even run because of the error.

lxsmnsyc avatar Mar 04 '25 07:03 lxsmnsyc

Okay to answer this, console.log(global) as a module-level call would cause a global error, which stops JS execution in general, there's no hydration error because that error isn't part of the hydration perse, heck, hydration wouldn't even run because of the error.

interesting

huseeiin avatar Mar 04 '25 08:03 huseeiin