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!

11 Replies

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

wedmaniacOP•13mo ago

Thank you for your answer @marvinh.. Here is the print. a 500 (Internal Server Error)

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?

wedmaniacOP•13mo ago

Ahhh! I did not know i could access the logs when deployed.

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

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.•13mo ago

Is that Callback component an island?

wedmaniacOP•13mo ago

No its just a route that the user gets redirected to after authenticating with google

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.

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.•13mo ago

no worries. It's always a bit of a mindshift when coming from a classic SPA architecture

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

Did you find this page helpful?