How Can You Resolve The Error “Module Not Found: Error: Can’t Resolve ‘fs’”?

March 1, 2022

Angular

AngularJS has become a set of tools for creating the most suitable framework for application development. It is very expandable and integrates nicely with other frameworks.

When you try to upgrade Angular, you receive this message: “Module Not Found: Error: Can’t Resolve ‘fs’”.

This was among the most common errors that every programmer could make. Hence, why would it appear, but can it be resolved? We’ll go through it with you.

Why Did The Problem Happen?

This issue occurs because angular-cli did not support node components such as “fs” or “path.”

Here is an example.


ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'E:\Project\Milan\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'E:\Project\Milan\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 'E:\Project\Milan\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
When doing npm run start aka ng serve —proxy-config proxy.conf.json using Angular v6, you may see the error code:

In./src/providers/core/translate/translate-universal-loader.service.ts, there is an ERROR. Module could not be found: Cannot resolve 'fs' in '/Users/me/Documents/projects/myproject/src/providers/core/translate'.

Five Amazing Approaches to fix “Module Not Found: Error: Can’t Resolve ‘fs’” Error

And, surprise, you just solved it using the methods listed below.

Solution 1

In the first method, we will insert this code for Webpack.

module.exports = {

    …

    resolve: {

        fallback: {

            “fs”: false

        },

    }

}

Solution 2

The answer is to include the following in the webpack configuration:

config.node = {

  fs: ’empty’,

}

Solution 3

You need to include node:’empty’ in the webpack.config script.

Solution 4

If you are using NuxtJs, 

// Build Configuration: https://go.nuxtjs.dev/config-build

build: {

    extend(config, {}) {

        config.node = {

            fs: ’empty’

        }

    }

},

Solution 5

Only to the “package.json” file, insert.

“browser”: {

  “fs”: false,

  “path”: false,

  “os”: false

}

Conclusion

If you are still perplexed by this error: “Module not found: Error: Can’t resolve ‘fs’”, the options listed here are the quickest.

Researchers have a large community when you still prefer help or have basic Angula issues, and everybody is always happy to help. Finally, we wish all readers a fantastic day filled with fresh solutions.

Related posts
Scroll to Top