11

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

Kally
  • 324
  • 1
  • 4
  • 12
  • 2
    If you're building something for client-side usage, you cannot use any modules that reference the `fs` module since there is no `fs` module in the browser. – jfriend00 Jan 25 '22 at 21:13
  • 3
    Your `react` app is running in the browser. The browser doesn't support `fs`. And as the `dotenv` package references `fs` you can't use it for clientside code (and it wouldn't make much sense anyways, because there is also no `process.env` in the browser) – derpirscher Jan 25 '22 at 21:15
  • 3
    You don't need dotenv for a client side react app, just create your .env at the root with the name prepended with REACT_APP and it will work out of the box. – Reno Sep 27 '22 at 17:30

5 Answers5

32

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.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Stéphane Sulikowski
  • 444
  • 4
  • 3
  • Thanks for pointing out that the variable names need to be prefixed with REACT_APP_ ! (You can see why in config/env.js) – Ben Wheeler Jul 11 '22 at 01:56
  • Just to clarify, does this mean that this happens automatically now from the .env file without the use of dotenv.config() in index.js? – Nihal Dias Mar 07 '23 at 13:36
15

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
  1. Create webpack.config.js file under the root folder with following content
const Dotenv = require('dotenv-webpack');
module.exports = {
    plugins: [
        new Dotenv()
    ]
}
  1. 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

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
nesnes
  • 171
  • 1
  • 2
  • 3
    This: There is no need to import dotenv. It is already done in webpack.config.js – DerDu Jul 04 '22 at 14:21
  • I've gone down this path and when everything worked fine I found out that my API keys (also the secret ones) became bundlet into the client code, easily to read by everyone from the developer console. – ShadowGames Jul 23 '22 at 13:05
  • 1
    @ShadowGames you have to remove the prefix REACT_APP_ to the names of your constant you don't want to be accessible to the client but only by the server. – Hugo Trial Jan 06 '23 at 09:58
6

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

ajay_full_stack
  • 494
  • 7
  • 13
1

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

Mortadha Fadhlaoui
  • 388
  • 1
  • 5
  • 16
0

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.

stelloprint
  • 303
  • 2
  • 9