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.

Solution 1

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'
      }

     // ....
  }
}

Solution 2

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"
            }
        })
    }

Solution 3

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.

Comments

[akaHeimdall]

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?

[adamrights]

{ 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)/, }) } } },

[akaHeimdall]

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!

[Rikard Askelöf]

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!