Cómo arreglar supabaseUrl en Vite

Introducción: al iniciar una aplicación creada con Vite y Supabase puede aparecer el error Uncaught Error: supabaseUrl is required. Este error indica que las variables de entorno que contienen supabaseUrl y supabaseAnonKey no se están leyendo correctamente, por lo general porque el archivo .env no está en la ubicación correcta, los nombres de las variables no tienen el prefijo VITE_ o el servidor de desarrollo no se ha reiniciado.

Causa: Vite solo expone las variables de entorno al frontend si comienzan con el prefijo VITE_. Si import.meta.env no devuelve valores para VITE_SUPABASE_URL o VITE_SUPABASE_ANON_KEY, supabase.createClient recibe undefined y lanza el error.

Solución paso a paso:

1 Crear un archivo .env en la raíz del proyecto con las siguientes variables:

VITE_SUPABASE_URL=https://xxxx.supabase.co VITE_SUPABASE_ANON_KEY=eyJhbGciOi...

2 Asegurarse de incluir el prefijo VITE en los nombres. Vite no expone variables sin ese prefijo al cliente.

3 Configurar el cliente de Supabase en el código de frontend, por ejemplo:

import { createClient } from @supabase/supabase-js; const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string; const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string; export const supabase = createClient(supabaseUrl, supabaseAnonKey);

4 Añadir .env a .gitignore para evitar subir credenciales al repositorio.

5 Reiniciar el servidor de desarrollo con npm run dev para que Vite vuelva a cargar las variables de entorno.

Resumen: el mensaje supabaseUrl is required suele significar que las variables de entorno no se cargaron. Colocar .env directamente en la raíz del proyecto, usar el prefijo VITE_ y reiniciar el servidor normalmente resuelve el problema.

En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones a medida, inteligencia artificial, ciberseguridad y servicios cloud. Si necesitas una solución completa para tu proyecto web o móvil y soporte en integración con plataformas como Supabase y Vite, podemos ayudarte a diseñar e implantar arquitecturas escalables y seguras. Con experiencia en aplicaciones a medida y software a medida ofrecemos también servicios de desarrollo de aplicaciones y software multicanal y soluciones de inteligencia artificial para empresas incluyendo agentes IA, IA para empresas y proyectos de Business Intelligence con Power BI. Además trabajamos en ciberseguridad, pentesting, servicios cloud aws y azure y servicios de inteligencia de negocio para garantizar que tus aplicaciones funcionen de forma óptima y segura.

Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.