probably this is the most repeated question but I am still unable to figure out what is the issue.
.env file
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;
This is where I am writing down the get request
const companyResponse = async () => {
const response = await customAxios.get(ApiConstants.COMPANY.FIND_ALL);
setCompanies([response.data]);
}
Errors I Have been getting:
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.
When you declare your environment variable do not leave any space between your variable REACT_APP_BASE_URL and your URL http://localhost:3000/ and you should remove double quote from your base URL string.
Replace your .env declaration as
REACT_APP_BASE_URL=http://localhost:3000/
No space and quote!
To access your base URL in your components you can use
process.env.REACT_APP_BASE_URL
Change your 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;
Happy coding.