CODEWITHSUNDEEP
node.jsvue.jsnuxt.js
akaHeimdall
akaHeimdall

Reputation: 959

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

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.

Upvotes: 4

Views: 15220

Answers (3)

Fatihd
Fatihd

Reputation: 645

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

Upvotes: 5

Nadine Thery
Nadine Thery

Reputation: 115

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.

Upvotes: 5

adamrights
adamrights

Reputation: 1731

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

     // ....
  }
}

Upvotes: 4

Related Questions