wedman
wedman8mo ago

How can I make sure the code gets run on the client-side??!

import { useEffect, useState } from "preact/hooks";

export default function Callback() {
useEffect(() => {
const hashParam = window.location.hash.substring(1);
console.log(`Param: ${hashParam}`);

}, []);

return (
<div>
....
</div>
);
}
import { useEffect, useState } from "preact/hooks";

export default function Callback() {
useEffect(() => {
const hashParam = window.location.hash.substring(1);
console.log(`Param: ${hashParam}`);

}, []);

return (
<div>
....
</div>
);
}
I would assume that the code is getting fired on the server side and that the error occurs when it is trying to access the window. Thank you in advance!
No description
11 Replies
marvinh.
marvinh.8mo ago
The code you posted looks fine. The useEffect hook is never executed on the server, so I'm 99.99% sure that the error is coming from somewhere else. Have you checked the output printed in your terminal? Fresh always prints where the error originated from there
wedman
wedman8mo ago
Thank you for your answer @marvinh.. Here is the print. a 500 (Internal Server Error)
No description
marvinh.
marvinh.8mo ago
That's the output from the browser console. A 500 http response is returned when there was an error on the server. This means we need to look at the server output. What does the server print to where you ran deno task start?
wedman
wedman8mo ago
Ahhh! I did not know i could access the logs when deployed.
No description
marvinh.
marvinh.8mo ago
yup, that's pretty useful to see the logs of the server. Looks like there is a useState being called outside of an island
wedman
wedman8mo ago
Thanks for helping out! 🙂 So now I don't get any errors but I suspect that the useEffect isn't running? I can't see any logs.
import { useEffect } from "preact/hooks";

export default function Callback() {

useEffect(() => {
console.log("is useEffect")
if (typeof window !== 'undefined') {
// window is now available
isClient.value = true;
console.log(window.location.hash)
// Perform your operations with window.location.hash here
}
}, []);

return (
<div>
....
</div>
);
}
import { useEffect } from "preact/hooks";

export default function Callback() {

useEffect(() => {
console.log("is useEffect")
if (typeof window !== 'undefined') {
// window is now available
isClient.value = true;
console.log(window.location.hash)
// Perform your operations with window.location.hash here
}
}, []);

return (
<div>
....
</div>
);
}
marvinh.
marvinh.8mo ago
Is that Callback component an island?
wedman
wedman8mo ago
No its just a route that the user gets redirected to after authenticating with google
marvinh.
marvinh.8mo ago
Then that code will never be sent to the browser. The main idea behind Fresh is that it is server first. By default Fresh only sends the resulting HTML to the browser and no JS. To make components run in the browser they need to be turned into an island. The island components are bundled and run in the browser. So any useEffect that is not inside an island will never be executed, because that component is never sent to the browser in the first place.
wedman
wedman8mo ago
Ahh! Now when I think about it I think I have had a similar problem in the past. I'm such a doofus! <:deno_thankyou:1181938324273893376> Probably should do a bit of research so i get the grasp of things:)
marvinh.
marvinh.8mo ago
no worries. It's always a bit of a mindshift when coming from a classic SPA architecture