0

On a mac machine, this has no problem running but on a windows machine, it started breaking and for no apparent reason.
On the windows one, it returns the key with missing characters.

In my env file, I have the following (the auth key is a sample one).

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

And I am fetching the data in the following way:

process.env.AUTH_KEY;

I would appreciate it if you have any ideas.

Ivan Vasilev
  • 3
  • 5

5 Answers5

1

You should put REACT_APP_ at the beginning of the environment variables like

.env

REACT_APP_AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

and use it in your components as

component.js

let key = process.env.REACT_APP_AUTH_KEY
onuriltan
  • 3,730
  • 4
  • 25
  • 37
  • I am also using parcel to build/run the app, and the key is returned even without the key being prefixed with 'REACT_APP_). But it gets cut off after '\', it should be a Windows thing, because on the Mac machine it works and does not cut the string. – Ivan Vasilev Jan 02 '20 at 15:29
  • Hmm maybe if you are using different bundler, but accoring to [docs](https://create-react-app.dev/docs/adding-custom-environment-variables/) you should put REACT_APP or REACT\APP at the begining of the env vars – onuriltan Jan 02 '20 at 15:33
0

Since you are using CRA(create-react-app), you need to add REACT_APP prefix for the env variables.

So in your case

Instead of 

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

Need to update as

REACT_APP_AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

Then in code you can access process.env.REACT_APP_AUTH_KEY;

Detailed Description

First of all, it must be clear that there is no such thing as environment variables inside the browser environment. Whichever solution we use nowadays is nothing but a fake abstraction.

But, then you might ask, what about .env files and REACT_APP prefixed environment variables which come straight from documentation? Even inside the source code, these are used as process.env just like we use environment variables inside Node.js.

In reality, the object process does not exist inside the browser environment, it’s Node-specific. CRA by default doesn’t do server-side rendering. It can’t inject environment variables during content serving (like Next.js does). During transpiling, Webpack process replaces all occurrences of process.env with a string value that was given.

Learner
  • 8,379
  • 7
  • 44
  • 82
  • I am also using parcel to build/run the app, and the key is returned even without the key being prefixed with 'REACT_APP_). But it gets cut off after '\', it should be a Windows thing, because on the Mac machine it works and does not cut the string. – Ivan Vasilev Jan 02 '20 at 15:26
  • Okay may be some escaping characters issue – Learner Jan 02 '20 at 15:26
  • Yeah, I think so, tried to find a solution but the solutions which I found did not work. – Ivan Vasilev Jan 02 '20 at 15:27
  • @IvanVasilev did you tried this one ? https://stackoverflow.com/questions/20635695/what-are-valid-characters-for-windows-environment-variable-names-and-values – Learner Jan 02 '20 at 15:30
  • Just checked it out, my string does not contain '<, >, |, &, or ^,' and I tried echoing it in the cmd and it printed it out correctly, it was working before, it stopped working all of a sudden, which was the weird part, maybe a windows update, I have no idea. Thanks for the help though! – Ivan Vasilev Jan 02 '20 at 15:38
  • Cool no issues, it was a knowledge level for me also.. Thanks for the reply.. I will reply if i find any other even I am also using mac.. So – Learner Jan 02 '20 at 18:00
  • Can you try putting the value inside a single quote string and check it let me know if it worked for you. – Learner Jan 02 '20 at 18:20
  • Already tried it before the StackOverflow, with single and double quotes, does not work. – Ivan Vasilev Jan 03 '20 at 14:49
0

I also faced the same problem where my .env data are being cut off. I believe this may be caused by the word wrap/line break when you copy and paste it to the .env file. I managed to solve it copying the string to a notepad and manually breaking the word wrap. This works for me afterwards, however it can be rather tedious. I guess an easier way could be to set the variables in the .env file programmatically so as to prevent that bug. This link should help https://stackoverflow.com/a/59198410/14631246

However, I had to edit a little from that answer and implement a line break method to remove the line break.

fs.appendFileSync(
  "file_name",
  `ENV_NAME=${VALUE_TO_STORE.replace(/(\r\n|\n|\r)/gm, "")}`
);
Jarrett
  • 486
  • 7
  • 13
0

You should use

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

instead of

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

You should type the \ character before each $ character.

Otherwise, it will detect it as a variable.

yavuzdeveloper20
  • 1
  • 2
0

You should use

AUTH_KEY=ec4\$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj\$u5hBm$FQDuBXJV/lYWo

instead of

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

You should type the \ character before each $ character.

Otherwise, it will mistake it for a variable.

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
yavuzdeveloper20
  • 1
  • 2
  • The backslash character is not visible in the output of the answer, both code lines look the same, but the explanation below tells what to do. I suggested an edit to use code formatting so the backslashes become visible. – Ingo Steinke Mar 21 '22 at 08:42