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

I'm trying to use dotenv with an angle, but when it comes to requiring dotenv

 require('dotenv').config()  
 or
 const Dotenv = require('dotenv-webpack');

I get the following error:

ERROR in ./node_modules/dotenv/lib/main.js Module not found: Error: Can't resolve 'fs' in 'C:\Users\57322\Favorites\Proyecto\core4edu\node_modules\dotenv\lib'

package.json

"dotenv": "^8.2.0",
"dotenv-webpack": "^1.7.0",


Solution 1:[1]

I think the problem is related to webpack, I had the same problem on a next.js project and here is how I did to fix the problem.

Create file conf.js in root folder

I created a next.conf.js file in my root folder where there is my .env file, I imported dotenv and I exported the module where there is all my environment and these variables as if below.

export module dot env

Finally in my index file and my components I don’t need to import dotenv, I just need to paste my process.env.API_URL.

you dont need to import dotenv in index

I hope this example solves your problem.

Solution 2:[2]

I had a similar situation - working in the webpack development mode, installing dotenv, getting an error "Module not found: Error: Can't resolve 'fs' in node_modules\dotenv\lib'".

I uninstalled dotenv and stayed just with dotenv-webpack for development. I configured the webpack.config.js as it is written in docs.

Everything works now. Env variables are accessible globally without creating any additional file.

Solution 3:[3]

if you encounter this error with a create-react-app app, you need to go to the 'react-scripts' webpack config.

node_modules/react_scripts/config/webpack.config.js

under 'resolve':

resolve: {
  ....
  // add the fallback setting below 
  fallback: {
    "fs": false,
    "os": false,
    "path": false
  },
  ....
}

Solution 4:[4]

I faced a similar problem. dotenv-webpack installation will suffice. It is the dotenv require statement which is causing problem. Remove that and you will be good to go!

Solution 5:[5]

I want to also add TypeScript code on top of @Sidouxie's solution:

  1. Create a file that ends with .d.ts in your root directory.

  2. Add this to the file:

    declare global {
     namespace NodeJS {
       interface ProcessEnv {
         API_URL:string;
       }
      }
    }
    

This will globally check your environment variables in your TypeScript project.

Solution 6:[6]

This little addition to package.json starting from Angular 9 (confirmed on Angular 10) fixes this problem.

...
"browser": {
  "fs": false
},
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hamza
Solution 2 Brad Ahrens
Solution 3 E G
Solution 4 aayush612
Solution 5 Jeremy Caney
Solution 6 Daniel Danielecki