Probablemente esta sea la pregunta más repetida, pero todavía no puedo entender cuál es el problema.
archivo .env
REACT_APP_BASE_URL= "http://localhost:3000/"AxiosSetup.js
import axios from 'axios'; const customAxios = axios.create({ baseURL: import.meta.env.REACT_APP_BASE_URL, headers: { Accept: '*/*', 'Content-Type': 'application/json', }, timeout: 5000, }); export default customAxios;ApiConstants.ts
const ApiConstants = { COMPANY: { ADD: () => { return 'company/'; }, FIND_ALL: () => { return 'company/'; }, FIND_ONE: (companyId) => { return 'company/' + companyId; }, }, }; export default ApiConstants;Aquí es donde estoy escribiendo la solicitud de obtención
const companyResponse = async () => { const response = await customAxios.get(ApiConstants.COMPANY.FIND_ALL); setCompanies([response.data]); }Errores que he estado recibiendo:
AxiosSetup.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'REACT_APP_BASE_URL') Error in event handler: TypeError: Cannot destructure property 'bookmark_everywhere' of 'config' as it is undefined.Cuando declare su variable de entorno, no deje ningún espacio entre su variable REACT_APP_BASE_URL y su URL http://localhost:3000/ y debe eliminar las comillas dobles de su cadena de URL base.
Reemplace su declaración .env como
REACT_APP_BASE_URL=http://localhost:3000/
Sin espacio y cita!
Para acceder a su URL base en sus componentes, puede usar
process.env.REACT_APP_BASE_URL
Cambia tu AxiosSetup.js
import axios from 'axios'; const customAxios = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, headers: { Accept: '*/*', 'Content-Type': 'application/json', }, timeout: 5000, }); export default customAxios;Codificación feliz.