Module not found: Error: Can't resolve 'fs' in dotenv/lib - node.js

Question

All of a sudden, when creating a react production build, I get this error.
> safe-courier#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'fs' in '/workspace/safe-courier/client/node_modules/dotenv/lib'
I have searched on the web, found similar cases but different frameworks of which all were not of help in regards to this issue.
I have tried to uninstall dotenv and reinstall it again but i get the same error. I'm not sure what could be the problem understanding that fs module is part of nodejs and comes bundled with it

Answer 1

To solve this:
Create the .env file at the root level of you app
Name your variables beginning with REACT_APP_ // that's the key !!
Restart your server with npm start each time you change an env variable
Use your variable with process.env.NAMEOFYOURVARIABLE
No need of dotenv for your React app.

Answer 2

I solved the same problem;
npm install dotenv-webpack --save-dev
Create .env file under root folder
create env variable as
REACT_APP_YOURVARIABLE=itsvalue
Create webpack.config.js file under the root folder with following content
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
]
}
Then wherever you want to use variable in .env write
process.env.REACT_APP_YOURVARIABLE
There is no need to import dotenv. It is already done in webpack.config.js

Answer 3

1- As already mentioned by Stéphane Sulikowski, No need to use dot-env in react projects
Why?
"dot-env" uses some modules that are only supported by nodejs but not supported by "browser engines" like fs, os etc. React-code-bundle runs in the browser and the browser doesn't support module "fs", so if any modules reference the "fs" module will get the same error.
There is some inbuilt support by reactjs to use environment variables stored in a .env file and begins with REACT_APP_
2- If you have to use it for some reason use "env-cmd"
npm install env-cmd
3- create environment specific .env files like .env.local OR .env
4- In your "environment specific" OR .env file, add variables beginning with REACT_APP_
REACT_APP_API_BASE_URL="http://localhost:4000"
5- Use these environment variables in your code files
like console.warn (process.env.REACT_APP_API_BASE_URL)
6- OPTIONALLY...... configure package.json something like this
...
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Note - When you add a new variable in .env .... files, you have to run npm start OR related...

Answer 4

Just like Reno mentioned just create your .env at the root with the name prepended with REACT_APP and it will work out of the box
Example .env file
REACT_APP_GITHUB_API_URL=https://api.github.com/graphql
Usage:
process.env.REACT_APP_GITHUB_API_URL

Answer 5

If you are using create-react-app this article describes the behavior of environment variables: https://create-react-app.dev/docs/adding-custom-environment-variables/
Note that the document frequently reminds you of this warning:
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
To securely use secrets such as passwords and tokens, consider setting up a server that can deliver this data to the frontend via HTTP. For example, once users authenticate into your app you send their credentials to a microservice that can validate their identity and return an API key or session to be used for subsequent REST API calls.