How to resolve the "Module not found: Error: Can't resolve 'fs'" in nuxt.js?

Question

I'm a bit new to node, but from a lot of searching, it looks like 'fs' broke a lot of things in the past. I've come across several packages I've tried to install via npm and have run into the Module not found: Error: Can't resolve 'fs' error way too much.

I've run the npm install, and fs downloads a placeholder package, but I'm really at a halt because a package (among several) still has a dependency on fs.

Nearly every solution I find has resulted in declaring fs as empty in the node section of the webpack settings:

node: {
  fs: 'empty'
},

Unfortunately, I'm using Vue.js and nuxt and there is no webpack settings file (that I know of). I've tried to add it into my nuxt_config.js but haven't been successful. extend(config, ctx) { config.node = { fs: "empty" }; }

Is there a way to run the exclude inside of the nuxt_config? Also, is there a way to run it while still preserving my settings to run eslint on save?

extend(config, ctx) {
  // Run ESLint on save
  if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }
}

Thanks.

score 5 · Answer 1 · answered Nov 11 '20 at 18:35

5

Just in case it helps. In my case this error appeared all of a sudden and wasn't able to tell why. After trying everything (deleting and reinstalling npm packages, etc...) I found out that VS CODE auto referenced a package in a file I had just saved and I didn't notice.

In my case it added import { query } from 'express'.

Deleted the line and everything worked again.

answered Nov 11 '20 at 18:35

Nadine Thery

115
1
7

You just saved my day.... or week. The exact same thing happened to me and I've been reinstalling and deleting things like crazy. Thank you so much Nadine! – Rikard Askelöf Nov 12 '21 at 08:13
Thankyou so much, this was my issue also. Was sending me crazy. – Mr_Happy Jan 06 '23 at 23:50
I've spent a whole day in frustration and the answer was this simple!! thank you! – hamid niakan Apr 26 '23 at 05:07

score 5 · Answer 2 · answered Nov 26 '20 at 05:09

The usage may change according to versions.

In my case, i've to define confing.node with "=" character.

    build: {
        extend (config, { isDev, isClient }) { 
            config.node = {
                fs: "empty"
            }
        })
    }

score 4 · Accepted Answer · answered Jan 02 '19 at 07:05

4

The suggestion is correct, according to the webpack see the documentation you should set the fs module to 'empty'.

Have you tried inserting it into your nuxt configuration on the top level config within build block?

build: {
  extend (config, { isDev, isClient }) {

     config.node: {
        fs: 'empty'
      }

     // ....
  }
}

answered Jan 02 '19 at 07:05

adamrights

1,701
1
11
27

Thanks much, @adamrights. I thought I'd done it the way you presented, but obviously, I did not - it works correctly the way you've presented. Can I ask a followup: is there a way to combine what you have with my eslint-on-save settings `if (ctx.isDev...` above inside of the extend block? – akaHeimdall Jan 02 '19 at 08:23
`{ isDev, isClient }` is the ctx object in your example. try... build: { ... // EXTEND extend (config, { isClient }) { if (isClient) { config.module.rules.push({ enforce: 'pre', test: /\.js$/, loader: 'eslint-loader', exclude: /(node_modules)/, },{ enforce: 'pre', test: /\.vue$/, loader: 'eslint-loader', exclude: /(node_modules)/, }) } } }, – adamrights Jan 03 '19 at 02:32
Thanks - I was able to get it ... realized I was just using a comma to separate the two sections and I need to remove it. Very much appreciation for the help! – akaHeimdall Jan 03 '19 at 11:56

How to resolve the "Module not found: Error: Can't resolve 'fs'" in nuxt.js?

3 Answers3