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

[shansiddiqui94]

Everything was fine, my app had no issues at all until the New Year started (2022). It was then that Webpack began to fail and all these random errors that I had never dealt with before started to come in. I tried fixing the errors but more keep coming. I am not sure what to do. Anyone please assist.

Errors from my terminal below:

`Failed to compile.

Module not found: Error: Can't resolve 'fs' in '/Users/shansiddiqui/Desktop/dash/node_modules/dotenv/lib' asset static/js/bundle.js 2.31 MiB [emitted] (name: main) 1 related asset asset index.html 1.67 KiB [emitted] asset asset-manifest.json 190 bytes [emitted] runtime modules 28.2 KiB 13 modules modules by path ./node_modules/ 2.13 MiB 126 modules asset modules 4.4 KiB 16 modules modules by path ./src/ 18.3 KiB modules by path ./src/.css 8.82 KiB ./src/index.css 2.72 KiB [built] [code generated] ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated] ./src/App.css 2.72 KiB [built] [code generated] ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code generated] modules by path ./src/.js 4.15 KiB ./src/index.js 1.51 KiB [built] [code generated] ./src/App.js 2.64 KiB [built] [code generated] modules by path ./src/components/weather/ 5.3 KiB ./src/components/weather/Weather.js 3.41 KiB [built] [code generated] ./src/components/weather/Form.jsx 1.89 KiB [built] [code generated]

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/shansiddiqui/Desktop/dash/node_modules/dotenv/lib' @ ./src/components/weather/Weather.js 7:0-28 12:0-13 @ ./src/App.js 5:0-56 25:41-53 @ ./src/index.js 7:0-24 10:33-36

ERROR in ./node_modules/dotenv/lib/main.js 26:13-28 Module not found: Error: Can't resolve 'path' in '/Users/shansiddiqui/Desktop/dash/node_modules/dotenv/lib'

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.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } @ ./src/components/weather/Weather.js 7:0-28 12:0-13 @ ./src/App.js 5:0-56 25:41-53 @ ./src/index.js 7:0-24 10:33-36

ERROR in ./node_modules/dotenv/lib/main.js 28:11-24 Module not found: Error: Can't resolve 'os' in '/Users/shansiddiqui/Desktop/dash/node_modules/dotenv/lib'

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.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } @ ./src/components/weather/Weather.js 7:0-28 12:0-13 @ ./src/App.js 5:0-56 25:41-53 @ ./src/index.js 7:0-24 10:33-36

3 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 3 errors in 35396 ms `

[motdotla]

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

[shansiddiqui94]

I didnt know that dotENV had other version, could you kindly guide me to how i could roll back the version?

[nikolay-slavov]

Same here

[richert-addisca]

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

[shansiddiqui94]

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

[motdotla]

~~We are going to remove fs from the library (the feature that uses it is helpful but a convenience. it can move into an expansion module). We'll work on releasing a major breaking change this evening with that change.~~

Edit:

I was referring to os. Referring to a different issue.

I'll be working to repeat this issue today though and solve for you all.

[stmswitcher]

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

[motdotla]

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.

[motdotla]

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

[motdotla]

@shansiddiqui94 can you post (anonymized) the contents of your webpack.config.js file?

[stmswitcher]

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

[Ding-Fan]

same error, then I figured my tool chain already provided environment variables in the F(ine)M(anual)

[svante1987]

@motdotla I'm trying to update an old react project to the latest version. I have this very same problem:

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24

Module not found: Error: Can't resolve 'fs' in 'D:\path to my local dotenv library'

ERROR in ./node_modules/dotenv/lib/main.js 26:13-28

Module not found: Error: Can't resolve 'path' in 'D:\path to my local dotenv library'

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.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }

There is three of these, one for 'fs' one for 'path' and one for 'os'.

I dont really know how to solve this following your link: https://github.com/dotenv-org/examples/tree/master/dotenv-react-typescript

I'm pretty new to programming so any help would be appriciated. :) Thanks!

[ovikariy]

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

[ovikariy]

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

[motdotla]

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

[ashutosh887]

@motdotla Sir I want to be a contributor in Open Source Please assign issues to me if you can

[motdotla]

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

[motdotla]

@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

[benjaminvanrenterghem]

Odd quirk, an older (pre 2022) installation runs fine, but a new one brings up a similar error. As someone mentioned before, removing the dotenv require in, in my case index.js, fixed this problem.

[jeveloper]

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_="sometestapi"

This will be injected into process.env

[wilson1229]

hi im new here and same problem bring me here, has this issue already been solved ?

[trantrunghieuvns]

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

[andrejmoltok]

I have a similar issue with using dotenv. I get the following error, while using next.js app: `error - ./node_modules/dotenv/lib/main.js:1:0 Module not found: Can't resolve 'fs'

Import trace for requested module: ./pages/register.js ./pages/index.js

https://nextjs.org/docs/messages/module-not-found`

[Aja-Edward]

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

[mattdrose]

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

[motdotla]

The permanent fix for this has been released as [email protected].

Please try it out and let us know if it works for you.

It will be released officially as 16.1.0 later this month.

[pastilline33]

@motdotla I am a complete noob. I did a search 'npm search dotenv' and still see 16.0.3 listed. How can I get the 16.1.0-rc2?

[motdotla]

You can run npm install [email protected] --save.

But yes, it won't appear in the search because it is an RC. You can see all the RCs here:

https://www.npmjs.com/package/dotenv?activeTab=versions

[umpierres]

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