dotenv: nx related: Module not found: Error: Can't resolve 'fs'

I found out that for React app it is not needed to call the config as react-scripts already uses dotenv.

So I removed require(‘dotenv’).config() from my code and am able to access the environment variables without it.

See this answer for more details: https://stackoverflow.com/a/56668716/3394779

Same issue for me, I get 3 errors too for ‘fs’, ‘path’ and ‘os’

Thank you everyone. Continue to +1 if this is also happening to you.

It looks like the issue will be related to webpack’s warning here:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

npm audit fix and npm audit fix --force works for me,

I still have this problem, the same error. My .env version is 16.3.1. Can someone help?

This solution work for me,

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 }, … }

Hey folks, if you’re using CRA, i suggest a solution of not using this module. Rather save your stuff in .env
prefix everything with REACT_APP_<your own>=“sometestapi”

This will be injected into process.env

@motdotla, thanks for the link. It appears that my issue is not valid then and it’s just a coincidence I found this thread.

Being new to react, I had no idea it already has dotenv under the hood, plus, it requires env variables to have REACT_APP_ prefix. In the end, this stack overflow topic made it clear to me.

However, the errors I’ve been seeing were happening when following the installation instructions, in particular this part:

import * as dotenv from "dotenv";
dotenv.config();

In case anyone else stumbles upon this issue, RTFM.

Sorry for a false alert.

This happens to a lot of people. It’s unexpected. We’ve added it to our FAQ. Hopefully that helps others. Thank you for raising this issue.

https://github.com/motdotla/dotenv#how-come-my-environment-variables-are-not-showing-up-for-react

React, I used CRA to create

@motdotla, thanks for the link. It appears that my issue is not valid then and it’s just a coincidence I found this thread.

Being new to react, I had no idea it already has dotenv under the hood, plus, it requires env variables to have REACT_APP_ prefix. In the end, this stack overflow topic made it clear to me.

However, the errors I’ve been seeing were happening when following the installation instructions, in particular this part:

import * as dotenv from "dotenv";
dotenv.config();

In case anyone else stumbles upon this issue, RTFM.

Sorry for a false alert.

@stmswitcher and others can you check if you can duplicate the issue here:

https://github.com/dotenv-org/examples/tree/master/dotenv-react-typescript

This is working on multiple machines we have tried so far. Still trying to duplicate the issue and then solve the problem.

If you roll back to an older version of dotenv does it work ok?

Going back to v9.0.0 does not resolve the issue for me

Hi guys. Last MacOS ReactJS project that was created with npx create-react-app dotenv 16.3.1

Issue still is present. Could be avoided if use recommendation with updating webpack config. But will be great if it will be fixed and will be no need in manual updating webpack config 😃

So @motdotla will be great if you reopen this issue and fix it

What framework or platform are you using dotenv with?

Try adding this to your webpack config.

For webpack 5:

module.exports = {
  resolve: {
    fallback: {
      fs: false,
      path: false,
      os: false,
    },
  },
}

For webpack 4:

module.exports = {
  node: {
    fs: "empty",
    path: "empty",
    os: "empty",
  },
}

Hi, @ashutosh887 are you part of HackClub?! Tell Zach hello 😃

Hi, everyone, is this webpack example helpful to you:

https://github.com/dotenv-org/examples/tree/master/dotenv-webpack2

It is not receiving this error locally on my machine.

If that does not work for you, can you please try this example (which uses the dotenv-webpack node module):

https://github.com/dotenv-org/examples/tree/master/dotenv-webpack

Reproducible on Linux (Debian 11) in a fresh project with npm + react + typescript + dotenv. So far can’t find a workaround.

After debugging, I found that I can only make my app work without the .env file by putting my base URL and API KEY into the component. Using it this way makes me vulnerable but there is no workaround. I have tried everything even experienced coders don’t know. process.env is not working!

I am not sure why this is happening but since the start of the new year Literally January 1st this is ongoing. Before everything was fine!. So please can someone figure out why this happening.

Thank you