Tengo una aplicación de reacción creada con create-react-app, también tengo un .env en la carpeta raíz con REACT_APP_SERVER_URL .
En mi entorno localhost, todo funciona como se esperaba, pero cuando construyo e implemento en Firebase, aparece el error SyntaxError: Unexpected token < in JSON at position 0 .
En el método, si lo envío a la consola console.log(process.env.REACT_APP_SERVER_URL) , la URL se escribe en la consola y puedo hacer clic en ella e ir a la página de inicio, que es solo una respuesta json (para probar) .
Sin embargo, en el siguiente código, obtengo el SyntaxError como arriba
fetch(`${process.env.REACT_APP_SERVER_URL}/`, { mode:"cors", credentials :"include", method : "GET", headers : { Accept : "application/json", "Content-Type" :"application/json" } }) .then(response => response.json()) .then(data => { setHello(data.message) console.log(data.message) }) .catch(er => { console.log("fetch was caught") console.log(er) }) Si hago console.log(process.env) , entonces puedo ver el objeto con el valor correcto para la URL del servidor y si reemplazo la URL en la búsqueda de la variable .env a la URL codificada (exactamente lo mismo que se imprime en la consola, por ejemplo, https://serverapi.com/ ), luego todo vuelve a funcionar como se esperaba y veo el mensaje data.message.
Probé algo como const {REACT_APP_SERVER_URL} = process.env pero tampoco funcionó.
Me estoy quedando sin ideas sobre por qué aparece el error con la variable de entorno.
Hizo clic mientras escribía esto, pero en mi archivo .env tenía REACT_APP_SERVER_URL=https://server.com/ luego en la búsqueda tenía fetch(`${process.env.REACT_APP_SERVER_URL}/`) Entonces, debido a que tenía un / al final de la línea SERVER_URL y también en la llamada de recuperación, el código final tenía dos // y parecía https://server.com// , que era el problema. Lo solucioné eliminando / en el archivo .env