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

shansiddiqui94 commented 2 years ago

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 commented 2 years ago

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

shansiddiqui94 commented 2 years ago

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

nikolay-slavov commented 2 years ago

Same here

richert-addisca commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

motdotla commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

stmswitcher commented 2 years ago

@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 commented 2 years ago

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

svante1987 commented 2 years ago

@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 commented 2 years ago

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

ovikariy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

motdotla commented 2 years ago

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

motdotla commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

This will be injected into process.env

wilson1229 commented 2 years ago

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

trantrunghieuvns commented 1 year ago

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

andrejmoltok commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

The permanent fix for this has been released as dotenv@16.1.0-rc2.

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 commented 1 year ago

@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 commented 1 year ago

You can run npm install dotenv@16.1.0-rc2 --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 commented 1 year ago

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

motdotla commented 1 year ago

What framework or platform are you using dotenv with?

umpierres commented 1 year ago

React, I used CRA to create

mr-possible commented 1 year ago

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

But my .env file is outside the react project. I want to set the path but without using 'require' how to do this?

ZipovUA commented 11 months ago

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

Tuscan-blue commented 11 months ago

@ovikariy This answer helps me a lot! Thank you!

r3plica commented 9 months ago

I have this issue in angular (using nx) and dotenv 16.4.1:

./node_modules/dotenv/lib/main.js:2:13-28 - Error: Module not found: Error: Can't resolve 'path' in '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 }

./node_modules/dotenv/lib/main.js:3:11-24 - Error: Module not found: Error: Can't resolve 'os' in '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 }

./node_modules/dotenv/lib/main.js:4:15-32 - Error: Module not found: Error: Can't resolve 'crypto' in 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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

I tried using the fallbacks but that doesn't help.

TylerSmall19 commented 7 months ago

Getting this error in CRA currently, brand new install with the most recent versions of all of the packages.

an0o0nym commented 1 month ago

Removing


import dotenv from "dotenv";

dotenv.config();

from my index.js worked for my CRA project.

motdotla / dotenv

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