banner.py: fix import specification for getBackendURL (#2584)

* banner.py: fix import specification for getBackendURL

Use the constant Dirs.STATE_PATH

* state.js: only `getBackendURL` dynamically when running client side

During server side rendering, `getBackendURL` cannot access the current
location from the `window`, because there is no `window`.

* Better client-side context checking

Thanks jackie

reflex/.templates/web/utils/state.js

@@ -64,7 +64,7 @@ export const getToken = () => {
   if (token) {
     return token;
   }
-  if (window) {
+  if (typeof window !== 'undefined') {
     if (!window.sessionStorage.getItem(TOKEN_KEY)) {
       window.sessionStorage.setItem(TOKEN_KEY, generateUUID());
     }
@@ -81,7 +81,7 @@ export const getToken = () => {
 export const getBackendURL = (url_str) => {
   // Get backend URL object from the endpoint.
   const endpoint = new URL(url_str);
-  if (SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)) {
+  if ((typeof window !== 'undefined') && SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)) {
     // Use the frontend domain to access the backend
     const frontend_hostname = window.location.hostname;
     endpoint.hostname = frontend_hostname;

reflex/components/core/banner.py

@@ -9,7 +9,7 @@ from reflex.components.chakra.overlay.modal import Modal
 from reflex.components.chakra.typography import Text
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
-from reflex.constants import Hooks, Imports
+from reflex.constants import Dirs, Hooks, Imports
 from reflex.utils import imports
 from reflex.vars import Var, VarData
 
@@ -34,7 +34,7 @@ class WebsocketTargetURL(Bare):
 
     def _get_imports(self) -> imports.ImportDict:
         return {
-            "/utils/state.js": [imports.ImportVar(tag="getBackendURL")],
+            f"/{Dirs.STATE_PATH}": [imports.ImportVar(tag="getBackendURL")],
             "/env.json": [imports.ImportVar(tag="env", is_default=True)],
         }
 

reflex/components/core/banner.pyi

@@ -14,7 +14,7 @@ from reflex.components.chakra.overlay.modal import Modal
 from reflex.components.chakra.typography import Text
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
-from reflex.constants import Hooks, Imports
+from reflex.constants import Dirs, Hooks, Imports
 from reflex.utils import imports
 from reflex.vars import Var, VarData