wedmaniac
wedmaniac•13mo 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.•13mo 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
wedmaniac
wedmaniacOP•13mo ago
Thank you for your answer @marvinh.. Here is the print. a 500 (Internal Server Error)
No description
marvinh.
marvinh.•13mo 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?
wedmaniac
wedmaniacOP•13mo ago
Ahhh! I did not know i could access the logs when deployed.
No description
marvinh.
marvinh.•13mo 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
wedmaniac
wedmaniacOP•13mo 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.•13mo ago
Is that Callback component an island?
wedmaniac
wedmaniacOP•13mo ago
No its just a route that the user gets redirected to after authenticating with google
marvinh.
marvinh.•13mo 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.
wedmaniac
wedmaniacOP•13mo 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.•13mo ago
no worries. It's always a bit of a mindshift when coming from a classic SPA architecture

Did you find this page helpful?