Window is not defined | Solución Gatsby Error

Gatsby – Window is not defined o Located is not defined

¿Qué es , por qué ocurre y cómo solucionarlo?

Gatsby es uno de los generadores de sitios estáticos más populares disponibles para crear webs preconstruidas para aplicaciones Jamstack. Es un framework basado en React que ofrece muchos plugins para hacer la vida más cómoda a la comunidad de desarrolladores. He estado usando Gatsby durante un par de años, y mi experiencia es muy buena a excepción de algunos problemillas.

Hablaremos de uno de esos fallos que me he enfrentado y que afortunadamente he encontrado soluciones. Espero que os sea útil.

¿Qué es el error Window is not defined o Located is not defined ?

Para ejecutar una aplicación basada en Gatsby hay dos entornos diferentes, gatsby develop y gatsby build

gatsby develop: Un entorno de desarrollo habilitado con recarga en caliente. En este entorno, todas las APIs específicas del navegador como localstorage, o las globales como window, document, etc., funcionarán bien.
gatsby build: Es el entorno para construir la aplicación para producir componentes desplegables. Incluso puedes ejecutar la aplicación localmente desde los componentes desplegables usando el comando gatsby serve. A diferencia del entorno de desarrollo, el entorno de construcción está basado en nodejs.

El entorno nodejs no tiene las variables globales de un navegador definidas , como pueden ser window, document, o locate… Por lo tanto, si en el código fuente haces referencias a estas globales, pues va a dar poblemas durante la construcción. Es más que probable que tengas fallos durante la de construcción.

Nota: También puedes encontrarte con este error cuando utilizas una librería del lado del cliente (tal vez, un instalacion npm) que contiene una referencia a window, document, etc.

¿Cómo arreglar el error «ventana no definida»?

Hay varias maneras de arreglar/ignorar este error. Puedes utilizar la que más te convenga.

Comprobar si la ventana está definida

Puede comprobar si este objeto global del navegador está definida y, basándose en si está o no , ejecutar el bloque de código.

La variable isBrowser te ayuda a determinar si el objeto ventana está disponible en el entorno. Vamos a utilizarla para comprobar y llamar a un método para obtener un elemento del almacenamiento local del navegador.

Sería algo así:

const isBrowser = typeof window !== "undefined"

Yo he optado por realizar algo así.

Primero defino la variable para que funcione en las dos versiones gatsby develop y gatsby build.

La defino y le doy el valor que quiera, en este caso le pondré un valor vacio

let params = '';

Luego pregunto si window (la global) esta definida, y en el caso de que esté definida le doy el valor que deberia de tener y en el caso que no esté definida ya va a tener un valor vacio y no va a dar error.

if (typeof window !== 'undefined')

El código completo sería asi:

let params = '';
if (typeof window !== 'undefined') {
   params = new URLSearchParams(window.location.search); 
}

Esto hará que no tengas problema en ninguno de los dos entornos de compilación o construcción.

Esto me solucionó el error que me daba cuando quería pasar variables entre una url a otra url montado la web de cálculo de IVA , cuando intentaba recuperar las variables de la url en construcción me mostraba el error de que no existia para esa variable global.