D
Deno

help

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

Wwedman12/13/2023
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
Mmarvinh.12/13/2023
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
Wwedman12/13/2023
Thank you for your answer @marvinh.. Here is the print. a 500 (Internal Server Error)
No description
Mmarvinh.12/13/2023
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?
Wwedman12/13/2023
Ahhh! I did not know i could access the logs when deployed.
No description
Mmarvinh.12/13/2023
yup, that's pretty useful to see the logs of the server. Looks like there is a useState being called outside of an island
Wwedman12/13/2023
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>
);
}
Mmarvinh.12/13/2023
Is that Callback component an island?
Wwedman12/13/2023
No its just a route that the user gets redirected to after authenticating with google
Mmarvinh.12/13/2023
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.
Wwedman12/13/2023
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:)
Mmarvinh.12/13/2023
no worries. It's always a bit of a mindshift when coming from a classic SPA architecture

Looking for more? Join the community!

Recommended Posts
VSCode + Deno + Vite + TypescriptJust setup a project with `create-vite-extra` but all the starter files are full of typescript errorMemory LimitHello guys, in some situations i'am receiving one of the following error message `dd-hard-memory-limGoogle CalendarHi! I am looking for a minimal example how to access google calendar API. I already obtained credenI can't access my deno cloud github accountPlease help, by mistake I converted my personal github account to an organization account, and now IUploaded a module, need help!I uploaded my module: https://deno.land/x/vipps_mobilepay_sdk@0.0.1 But then I realised that I shoulBetter way of finding element from mapIm making an api and all routes are stored in a map. is there a better and more optimised way to loodeno info depthhow do i limit maximum output depth for `deno info` command? for example, it's easier to analyze verDate libraryCan anyone recommend a decent working date library for deno? All the ones I'm trying (datefns, dayjsawait writer.write(buffer) never resolves on Deno.CommandHiho. I'm creating a `Deno.Command` that writes a buffer to `vipsthumbnail` via stdin (and reads theNot sure if I understand kv watch right?Not sure if I understand kv watch right, is like named queues? o more like a reliable Broadcast chanDisplaying a ModalI am trying to get a minimal example of using Bootstrap Modals, and managing that modal using state.How do I run an npm script with multiple dependencies, e.g. `drizzle-kit generate:pg`?I thought about wrapping it into a task `"generate": "deno run -A npm:drizzle-kit generate:pg"` in tHow to use a class name as a qualifier for an enum ?Hi there, it's more of a generic typescript question but I'm using it in the Deno context and the lihow can I make him see the process?```ts error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on') proImporting NPM Packages in Deno Throws 'Uncaught SyntaxError' for Specific ModulesHi there, I'm relatively new to Deno. I'm running into an error with an NPM package import. ```JS imHow to override type definitions provided by a third party module@Deno AI Helper How do I override type definitions provided by a third party moduleSync Child Stdin ReadI'd like to make a JS wrapper around the repl of another language. For example: ```js let a = otherUsing custom font using fresh and tailwindcssHello ! I recently followed [this guide](https://fresh.deno.dev/docs/examples/migrating-to-tailwindwasm-vips file does not existOk this is not directly a deno thing, but anyway. Has anyone successfully used wasm-vips with `vips.update imports to latest version in `deno.json`i defined imports as URLs with the version of the packages in my `deno.json` file. i would like to k