Environment variable undefined in react app

Question

I have env var SERVER_URL=localhost:8000

config.js

export const SERVER_URL = process.env.SERVER_URL;

export { SERVER_URL as default };

and action:

function fetchData(apiUrl, timeout) {
    return timeoutPromise(timeout || 15000, fetch(`${SERVER_URL}${apiUrl}`))
        .then(checkHttpStatus)
        .then(parseJSON);
}

but after use this fetchData I get http://localhost:8000/undefined/some_api

idk where from came this undefined

Moniquemonism

what is apiUrl's value ? – Tahmosh

Can you post your full code please? – Paginal

api url some_api – Moniquemonism

Answer 1

If you are using create-react-app, only environment variables prefixed with REACT_APP_ will be available.

Try console.log(SERVER_URL), that's where your undefined came from.

Create an environment variable REACT_APP_SERVER_URL instead and refer to it with process.env.REACT_APP_SERVER_URL in your app.

Therefrom

Even I add prefixes it couldn't help me. – Paleoasiatic

Are you using create-react-app? – Therefrom

I'm using create-react-app and I've also added prefixes and it hasn't fixed the problem. I have my .env file in the project root and have also tried using dotenv to no avail. Has anyone figured this out yet? – Hamitic

Okay figured out my own problem, i was importing process first (as im used to when just using nodejs and not create-react-app) before calling process.env.REACT_APP_XX, and for some reason that overrides whats in process.env. Unsure why this was happening but after removing the import I could access the env vars! – Hamitic

Answer 2

Inside config.js:

const SERVER_URL = process.env.SERVER_URL;
export default SERVER_URL;

Other file app.js:

import SERVER_URL from './config';

Sulcus

While this code may resolve the OP's issue, it's better to include an explanation on how your code addresses the OP's issue. This way, future visitors can learn from your post, & apply it to their own code. SO is not a coding service, but a resource for knowledge. High quality, complete answers reinforce this idea, and are more likely to be upvoted. These features, plus the requirement that all posts be self-contained, are some strengths of SO as a platform that differentiates us from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – Bumblebee

Answer 3

I was having the same problem as OP and couldn't figure out why my env vars would't show up in react. For anyone coming from a nodejs background with little experience in react or create-react-app, this was a frustrating waste of hours for me that I'd like to save you!

Typically in nodejs I would import process before trying to use it in a script, like this

import process from 'process';
...
console.log(process.env.MY_VAR);

but this is probably already happening under the hood with create-react-app and so if you reimport it (by simply importing it as shown above) for some reason (maybe it overrides the previous instance of process?) it will wipe the env property clean and you wont be able to access anything.

The solution here is to not call import process and just use the process object wherever you need. So literally anywhere you want just call something like

console.log(process.env.REACT_APP_MY_VAR);

I also tried importing dotenv which also for some reason would not work! You need to just get it out of the process object that already exists.

Hamitic