How can I assign and call window variable on Qwik builder.io?

Question

I declared the window as global variable on the root file but when I call/assign on that variable, it gives me an error "window is not defined"

I should be able to declare the global window variable, assign any value to it, and call it wherever on the project.

Answer 1

window object is only available in browser. Qwik run first on the server and resume your app to client. during server render window is undefined.

use useClientEffect$ to interact with window object because this will only execute in the client side.

import { component$, useClientEffect$, useStore } from "@builder.io/qwik";
export default component$(() => {
  const store = useStore({ someKey: "" });
  useClientEffect$(() => {
    // some where in your client code
    window.someKey = "Some value";
    window.someMethod = () => "Some value";

    // consume someKey
    store.someKey = window.someKey;
    console.log(window.someMethod());
  });
  return <div>{store.someKey}</div>;
});