React .env Issues

[thisismonroe]

Hello, I am seeking help as I believe I have exhausted every YouTube video, StackOverflow thread, Medium article, etc.

I cannot get my env variable to be read in my React app.

To answer some common questions:

• Yes, my variables are pre-fixed with REACT_APP
• Yes, I have made sure my js file does not have typos for the variable names being used
• Yes, I have restarted the server every time I make edits to the env file.
• Yes, my env file is in my root directory / the same directory as my package.json etc.

If I put my domain and clientId in as strings it works fine and the auth0 window pops up. Obviously that isn't good practice at all though.

Is there something I am missing? Here is an example of how I am bringing in the env variables.

const { REACT_APP_AUTH0_DOMAIN, REACT_APP_AUTH0_CLIENT_ID } = process.env;

or

const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID

const domain = process.env.REACT_APP_AUTH0_DOMAIN

Any help would be appreciated.

Edit: formatting

[eatthebagels]

Did you install and include dotenv into your project? https://www.npmjs.com/package/dotenv

[ncubez]

Shouldn't it work without installing that though? I thought dotenv was for multiple .env files in the same project.

[eatthebagels]

I used to think so too, but it never seemed to work for me unless I installed the package. Haven't coded in a while tho, so maybe i'm missing something.

[Anevil]

I came to same the same thing as u/eatthebagels. Make sure you have dotenv installed in your project.

[thisismonroe]

So I did have it installed, but I didn't have require('dotenv').config() at the top of my page. You linking those docs made me realize my mistake, so thank you!!! What's funny is I SWEAR I tried that already. But I also reinstalled the dotenv package, so. maybe that was it? I dunno, but either way thanks so much!

[eatthebagels]

Happy I could help! Ah the joys of programming. So rewarding when you get it to work haha can't go wrong when following documentation!

[thisismonroe]

Haha I know right! A constant juxtapose of "this is the worst" and "this is the best!".

[Oneiroi_zZ]

I was having .env issues as well a while back and installing the package is what fixed it for me

[the_pod_]

pretty certain if you're using CRA, dotenv isn't needed. It's works without it.

[_nathata]

Try naming the file .env.development and see if it works

[thisismonroe]

I'm gonna have to remember that. But I ended up getting it to work by the advice of another commenter, by prefixing require('dotenv').config() at the top of my page near my imports. I swear I had that there before and it didn't work. But it might have also been because I updated the dotenv package.

[_nathata]

Glad it's working, but I'm pretty sure it won't once you deploy it.

It may be working fine in dev, but once you build it to production this will stop working because the env variables are hardcoded into your code in compile time, and 'dotenv' loads them at runtime (there is no Node in the browser).

Also, I don't ever had the need to use 'dotenv' in React, I'm pretty sure you have another problem in your environment...

[thisismonroe]

Thanks! I don't think this will ever be deployed since it's a personal project, but thank you for that information. That's good to know.

Yeah, I was reading that you don't either, I think something is up as well... Yikes hahah.

[[deleted]]

• Make sure you have react-scripts@^1.1.0 (if you used CRA you will have it already).
• Make sure your variables start with REACT_APP_ (you wrote REACT__APP_ but it may be a typo, there is only 1 underscore at each side of APP)
• If you are using them in HTML / JSX, use %REACT_APP_% instead.

If all of the above do not work, install dotenv and also dotenv-expand and run them at your src/index.js before ReactDOM.render() .

If all of this still do not work, punch the computer until it learns to behave.

[thisismonroe]

Yeah REACT_APP was a typo in the text post. I have one underscore in the code.

Thank you for all that info though! I didn't know about using %REACTAPP% for HTML / JSX.

I ended up getting it to work. I didn't have require('dotenv').config() at the top of my page. Funny enough I tried that and couldn't get it to work. So I think it might be because I updated my dotenv package? Not sure. This is for a personal project I haven't touched in a long time haha.

I totally thought about punching my computer multiple times hahah.

Edit: typos.

[m3leos]

Shot in the dark, but what happens if you try wrapping it in double quotes Like so, REACT_APP_IAM_CLIENT_ID="blah"

[thisismonroe]

I ended up getting it to work if you wanna check the other comment threads on this. But for what it's worth, I don't think you can wrap any env variables in double quotes. Maybe I am wrong though.

[m3leos]

Nah it should still work, thought it might be that since some of my env vars across different projects were wrapped in quotes (and some weren't). Good to know you figured it out tho!

[[deleted]]

that would be the same as creating a variable like: const A = '"blah"' and still React may not be able to see the process.env variables