Module not found: Error: Can't resolve 'fs' in
JavascriptAngularJavascript Problem Overview
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 gonde.
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.
Javascript Solutions
Solution 1 - Javascript
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
}
I hope this helps someone.
Thanks.
Solution 2 - Javascript
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!
Solution 3 - Javascript
For Webpack > 5
update webpack.config.js
module.exports = {
...
resolve: {
fallback: {
"fs": false
},
}
}
Solution 4 - Javascript
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.
Solution 5 - Javascript
Just add {node:'empty'} to your webpack.config file.
Solution 6 - Javascript
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
},
}
}
Solution 7 - Javascript
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
Solution 8 - Javascript
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'
}
}
},
Solution 9 - Javascript
Can you try these steps?
- Delete
node_modules - Delete
package-lock.json - Remove
"fs": "0.0.1-security"frompackage.json npm install --save
Solution 10 - Javascript
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.
Solution 11 - Javascript
I have the same issue. But after renaming a folder of mine from c# to csharp, the problem gone.
Solution 12 - Javascript
For Laravel Mix (^4.0), i solved with:
mix.webpackConfig({
"node": {
fs: 'empty',
}
});
in webpack.mix.js
Solution 13 - Javascript
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
]
}
}
Solution 14 - Javascript
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'}
Solution 15 - Javascript
For those who are at lost like me, just place the code below, before "scripts",
"browser": {
"fs": false,
"path": false,
"os": false
}
Solution 16 - Javascript
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 || {},
});
Solution 17 - Javascript
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
Solution 18 - Javascript
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/
Solution 19 - Javascript
Use fs server-side so if you're using NextJS you can use it in functions such as getStaticProps.