37

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",
2

8 Answers 8

22

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.

4
  • Did not work for me. I get 'REACT_APP_MY_ENV_VAR' is not defined. in the next.conf.js file. What calls next.conf.js, how do I know it's being used?
    – Paul
    Aug 16, 2021 at 22:48
  • 2
    Worked for me except, I had to use colon instead of = env: { YB_RAILS: process.env.YB_RAILS, },
    – PhilCowan
    Dec 14, 2021 at 20:26
  • In NEXT JS, there is a built-in support for loading variables actually, You dont need to specifically find a loader
    – user15608655
    Jan 21, 2022 at 9:51
  • 1
    Thank you sir, been at this the whole day ! :D Genius ;)
    – heyooo12
    Mar 4, 2022 at 13:54
13

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.

10

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

In your webpack.config.js under 'resolve':

resolve: {
  // ...
  // add the fallback setting below 
  fallback: {
    "fs": false,
    "os": false,
    "path": false
  },
  // ...
}
1
  • 2
    Editing node_modules wouldn't be the right solution if you're collaborating with others. They would still face this error on every fresh npm install
    – Nihal Dias
    Mar 7 at 13:11
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!

0
1

I solved a similar problem for myself as follows:

  1. create a file next.config.js in root directory
  2. which contains the following code:

module.exports = {
  env: {
    REACT_APP_API_HOST:'http://localhost:5001',
  },
}

  1. and after that, the variable REACT_APP_API_HOST became available in client part of my Next.js application as process.env.REACT_APP_API_HOST
0

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

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

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.

0

I was having the same problem, this was the solution for me enter link description here

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    May 25 at 22:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.