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?]: hydration fails silently without an error #1807

Open
2 tasks done
huseeiin opened this issue Feb 13, 2025 · 8 comments
Open
2 tasks done

[Bug?]: hydration fails silently without an error #1807

huseeiin opened this issue Feb 13, 2025 · 8 comments
Labels
bug Something isn't working needs triage

Comments

@huseeiin
Copy link
Contributor

Duplicates

  • I have searched the existing issues

Latest version

  • 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 huseeiin added bug Something isn't working needs triage labels Feb 13, 2025
@ankurpowar
Copy link

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

@ankurpowar
Copy link

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.

@huseeiin
Copy link
Contributor Author

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

@brenelz
Copy link
Contributor

brenelz commented Mar 4, 2025

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

@huseeiin
Copy link
Contributor Author

huseeiin commented Mar 4, 2025

@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
Copy link
Contributor Author

huseeiin commented Mar 4, 2025

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>;
}

@lxsmnsyc
Copy link
Member

lxsmnsyc commented Mar 4, 2025

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.

@huseeiin
Copy link
Contributor Author

huseeiin commented Mar 4, 2025

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

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

No branches or pull requests

4 participants