151

Oke, I upgraded Angular from 6 to 8. But I stil get errors.

I found on internet a solution that for a lot of users helped. But in this case it doesn't helped me.

So my package.json file looks like this:

{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "fs": "0.0.1-security",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

And my b tsconfig.json file looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
}

But I still get these errors:

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/node-modules-paths.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'

I found a possible solution, that you have to put some configuration in one of the node_modules. But I think that is not a good solution. Because if you remove all the imports and then install again the imports your configurations are gone.

Thank you

Oke, I removed the

 "fs": "0.0.1-security",

I deleted all the packes(node_modules) and did a npm install.

But now I get this:

(node:13880) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
Binary found at C:\Source\nien\vital10-frontend\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> vital10-frontend@0.55.0 postinstall C:\Source\nien\vital10-frontend
> node patch-webpack.js

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vital10-frontend@0.55.0 postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vital10-frontend@0.55.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_25_46_184Z-debug.log
PS C:\Source\nien\vital10-frontend>

and my package.json file looks like this now:

{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

Still get this errrors:

(node:15956) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vital10-frontend@0.55.0 postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vital10-frontend@0.55.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_59_04_891Z-debug.log
PS C:\Source\nien\vital10-frontend>

i Still get this three errros:

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'
i 「wdm」: Failed to compile.
3
  • have you tried removing "fs": "0.0.1-security", from your package.json? Jul 23, 2019 at 10:20
  • can you run "npm audit fix" Jul 23, 2019 at 10:24
  • Yes, I can run that, but doenst solve it Jul 23, 2019 at 12:08

20 Answers 20

178

The error is because of angular-cli does not support modules in node like "fs" and "path". (Issue)

Add the following to the root of the "package.json" file.

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

Angular apps such as the ones Angular CLI creates are browser apps. fs isn't available on the browser, it's only available on node apps.

13
  • 10
    Still getting the error. I'm using Angular 10. Electron 10.1 Where should I paste your code? in the root node? or within the "dependencies" node? Sep 8, 2020 at 10:34
  • 2
    Did you check packages.json file? Sep 9, 2020 at 6:58
  • 3
    I got this error while trying to use the firebase/testing module in Angular 10 tests. This solved it for me, except I had to include a few more libraries so it ended up being: "browser": { "fs": false, "path": false, "os": false, "net": false, "tls": false }
    – Alex Egli
    Nov 12, 2020 at 17:32
  • 6
    Isn't the file named package.json and not packages.json? (singular) - Doesn't work with Webpack 5. May 8, 2021 at 9:34
  • 5
    didn't work for me... I am using react Aug 20, 2022 at 13:37
85

For Webpack > 5
update webpack.config.js

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

Can't resolve 'fs' when bundle with webpack #447

3
  • 1
    It seems to be working for some people but it's not working for me, using Next.js v10.2. May 8, 2021 at 9:38
  • How can we configure that for karma to provide empty or simulated modules for the testing environment?
    – Guntram
    Oct 22, 2021 at 14:07
  • working for me with cra 5 and customize-cra Feb 9, 2022 at 18:33
47

For me the solution was to add this to the webpack config:

config.node = {
  fs: 'empty',
}

Another solution if you use NuxtJS:

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},

If you use NextJS (not tested, please confirm that it works in comments):

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.node = {
    fs: 'empty'
  }
  return config
},

In other cases, please refer to Anjana Silva post. An edit of your package.json file can do the job!

4
  • 4
    This miraculously worked for me. I am using Webpack through NextJS (not NuxtJS). Jan 14, 2021 at 8:00
  • 2
    It worked also for me, using webpack for storybook in a monorepo using nx and npm/yarn workspaces. Thanks!
    – McGiogen
    Feb 11, 2021 at 11:22
  • NB: I found webpack.config.js in /node_modules/react_scripts/config/ folder.
    – user1300214
    Jan 26, 2022 at 15:01
  • 1
    This Nuxt solution worked for me Apr 5, 2022 at 19:11
25

For NextJS 12: next.config.js

module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,

    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          "fs": false,
          "path": false,
          "os": false,
        }
      }
      return config
    },
  }
}
1
  • 2
    For anyone trying to follow dev.to/adrai/… to achieve i18n on Nextjs's SSG, this is the fix for the can't resolve fs issue!
    – KuN
    Jan 26, 2022 at 21:54
23

tl;dr

For people transpiling for Node.js: add target: node to the webpack.config.js file.

Explanation

I know this is an Angular question but those who are transpiling for Node.js have to keep in mind that by default, Webpack transpiles for browser targets, where you don't have modules provided only by Node.js. If your environment where you will be running the transpiled code is indeed Node.js then just mark it in the config file with target: node.

8

Just add {node:'empty'} to your webpack.config file.

5

I'm using Nuxt.JS What worked for me was using @thisismyname solution, and adding it to nuxt.config.js, like this:

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},
4

I was getting the same error, but it was due to my mistake, since I am using axios for a network request, but a some point in my app I typed redirect and pressed enter and my code completion imported the 'import {redirect} from "next/dist/next-server/server/api-utils";' Removing this line allowed me to continue with 'next build'.

See this link for reference: https://github.com/vercel/next.js/issues/9768

1
  • well, this just saved me a ton of time. Apparently VSCode autocompletion added "import { response } from "express"; " at the top of my file and I didn't notice. Thank you!!
    – DXM
    Mar 12, 2021 at 17:25
3

For anyone using laravel 8 with laravel-mix ^5

mix.webpackConfig({
    resolve: {
        fallback: { fs: false }
    }
});

This one is for webpack < 5 : mix.webpackConfig({ node: { fs: 'empty', } })

add this on your webpack.mix.js

2

Can you try these steps?

  1. Delete node_modules
  2. Delete package-lock.json
  3. Remove "fs": "0.0.1-security" from package.json
  4. npm install --save
6
  • Oke, I did that all. But still get the errors. See my updated post Jul 23, 2019 at 10:59
  • And I see that the package-lock.json also don re created anymore Jul 23, 2019 at 11:31
  • Do you have other suggestions? Jul 23, 2019 at 12:08
  • There is some change in updated version of fs, can you share the line which uses fs? It is supposed to be in gulp build file, also please specify the version of node JS you use, even that could be a problem
    – Vishal
    Jul 23, 2019 at 18:16
  • @mightycodeNewton Did you ever figure this out? I'm having the same issue and having found a way around it yet.
    – c0r3yz
    Sep 17, 2019 at 19:40
2

For those who are using react or next js. It might happen due to an auto import for json from express!

import { json } from 'express'

So, just make sure that this line was not auto imported.

1
  • 1
    Well I did not import json from express but response form express!. And man I did everything like config-overrides and node modules webpack configs but as soon as i removed response. It worked. That one line only made me go into 7 hours of debugging mode. Because it helped so upvoting it. Thank you Mohammad :)
    – Wahab Shah
    Jan 10 at 8:56
2

Add somewhere close to the bottom directly above

devtool: options.devtool ...

node: { fs: 'empty' },

This will cause the webpack to ignore fs dependencies.

i.e.

resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  node: { fs: 'empty' },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});
1
  • i.e. add node: { fs: 'empty' }, in webpack config Oct 19, 2022 at 10:49
2

Use fs server-side so if you're using NextJS you can use it in functions such as getStaticProps.

1
0

I have the same issue. But after renaming a folder of mine from c# to csharp, the problem gone.

0

For Laravel Mix (^4.0), i solved with:

mix.webpackConfig({
    "node": {
        fs: 'empty',
    }
});

in webpack.mix.js

2
  • And for Laravel Mix 6 ?
    – w3spi
    Nov 28, 2021 at 8:32
  • For laravel mix ^ 5 ` mix.webpackConfig({ resolve: { fallback: { fs: false } } }); ` Apr 5, 2022 at 12:33
0

An issue I've encountered was someone added node to the tsconfig.spec.json.

Removing that resolved the issue.

{
  "compilerOptions": {
     "types": [
        ...
        "node", // Remove this line
     ]
  }
}
0

its webpack behavior for non react app and you need to add any error returns to external object in webpack config. for me both 'react-native-fs' and 'fs' itself have been showing in error logs. add these then rebuild externals: { 'react-native-fs': 'reactNativeFs', 'fs': 'reactNativeFs'}

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
    Dec 6, 2021 at 20:33
0

For the Electron's renderer process, change your target in the webpack config file like this:

target: 'electron-renderer'

for more about target option of webpack for the Electron, refer to this page: https://webpack.js.org/configuration/target/

0

I received the error because I required electron from within Angular and tried to use an electron function. So for example instead of doing something like:

const { dialog } = require('electron');

Use IPC to send a message to the electron process:

import { IpcRenderer, IpcRendererEvent } from 'electron';
0

I simply fixed the application (the root cause) and the error was gone.

E.g. vscode inserted at the top of my index.tsx (CSR) some thing like import register from './api/register' probably by "auto-completion" because there is actually a pages/api/register.ts, which in turn pulls in a module (here nodemailer), which requires the 'fs' module. I removed this wrong line and the error was gone.

The reported error was

...
wait  - compiling / (client and server)...
error - ./node_modules/nodemailer/lib/dkim/index.js:10:0
Module not found: Can't resolve 'fs'

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

Import trace for requested module:
./node_modules/nodemailer/lib/mailer/index.js
./node_modules/nodemailer/lib/nodemailer.js
...
./pages/api/register.ts
./pages/index.tsx

I guess, in the client/web browser there is no 'fs' module available and therefore the compiler excludes it from its list of known modules (or something like that).

So my conclusion: If one gets this error, it is possibly a client side rendered code snippet, which pulls in direct or indirect another module, which requires 'fs'. In this case adjusting the webpack config with "fs: empty" etc. (e.g. via next.config.js - throws an error in my case) may work, but probably hides the real problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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