Module not found: Error: Can't resolve 'fs' in dotenv/lib

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:

1. Create the.env file at the root level of you app
2. Name your variables beginning with REACT_APP_ // that's the key !!
3. Restart your server with npm start each time you change an env variable
4. Use your variable with process.env.NAMEOFYOURVARIABLE

No need of dotenv for your React app.

Answer 2

I solved the same problem;

1. npm install dotenv-webpack --save-dev
2. Create .env file under root folder
3. create env variable as

REACT_APP_YOURVARIABLE=itsvalue

4. Create webpack.config.js file under the root folder with following content

const Dotenv = require('dotenv-webpack');
module.exports = {
    plugins: [
        new Dotenv()
    ]
}

5. 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

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.

Answer 5

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