strange issue of undefined in url in UAT env. in local it is working:

Question

can anybody please help on this.

I have strange issue in API. My backend is created in php and UI in react. in my env file below path are present.

API_URL=http://localhost:8080
FRONT_URL=http://localhost:80

so API_URL is for backend and FRONT_URL is for UI. I have called my API like below in react.

 axios
      .get(process.env.API_URL+ '/code';)
      .then()
      .error

my code is working properly. same API I can access from reactas well as postman. there is no issue. But when we deployed our application in UAT URL is appending undefined between API name and API URL. Below are API value in UAT env file.

FRONT_URL=https://uat-solve.dell.com
API_URL=https://api.uat-solve.dell.com

Now my application throwing error. it is not running. when I checked what URL it is trying to reach out then it came below.

https://api.uat-solve.dell.com/undefined/code

It is appending undefined in between. when I tried to access same url from postman after removing undefined output is coming.

What could be the possible reason of it? this is the new component in react. existing application working properly

Edit 1:-

I changed env variable to REACT_APP* but still it did not work.

Answer 1

The Create React App documentation states that you must prefix all environment variables within your .env files with REACT_APP_ for them to be available from within your code process.env.REACT_APP_<variable name>

If you don't want to use REACT_APP_ prefix, you can use env-create-react-app