He revisado todos los documentos de vite, react.js y dev blogs, pero no consigo que funcione.
Tengo un archivo .env que contiene lo siguiente
VITE_API_KEY = XXXdentro de mi archivo firebase.js lo estoy cargando como:
const firebaseConfig = { apiKey: import.meta.env.API_KEY, ..... ..... } // Initialize Firebase const app = initializeApp(firebaseConfig);pero aparece como nulo , reinicié el servidor de desarrollo, reinstalé node_modules (por si acaso) cambié los prefijos de var a REACT_APP_XX, intenté usar el objeto global process.env.XX, básicamente revisé todas las formas diferentes de leer vars desde un .env archivo en reaccionar
También he probado a taponarlo desde un componente pero tiene el mismo resultado
¿Alguna sugerencia/método para resolver este problema?
El nombre de la variable de entorno utilizada en el código debe coincidir con el nombre establecido en el archivo .env :
// .env VITE_API_KEY=abcd1234 👆 // firebase.js const firebaseConfig = { 👇 apiKey: import.meta.env.VITE_API_KEY, ⋮ }finalmente solucionado este problema, la cosa fue que:
import.meta.env.VITE_XXesta variable env se reemplaza estáticamente durante la producción, no durante el desarrollo, al menos en mi caso resolví esto comprobando el modo haciendo
if(import.meta.env.MODE === "development"){ //use dev keys } else{ //use .env variables }cuando está en modo de producción
import.meta.env.VITE_XXlas variables se cargarán correctamente, por lo que puede agregarlas como variables env en su servicio de implementación y funcionará bien. lo he probado con vercel y funciono