Uncaught TypeError: Cannot read Properties of undefined (reading REACT_APP_BASE_URL)

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.

>Solution :

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.