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.
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
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.
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, "")}`
);
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.
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.
create-react-app?