Module not found: Error: Can't resolve 'fs'

Question

I working on a Laravel 5.3 project. I am getting below errors when I am running gulp command in CMD.

Could anyone say how can I get a error less result ?

gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(function(mix) {
    mix.sass('app.scss');
});


elixir(function(mix) {
   mix.webpack('app.js');
}); 


elixir(function(mix) {
    mix.version(['css/app.css', 'js/app.js']);
});

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-plugin-add-module-exports": "^0.2.1",
    "bootstrap": "^4.0.0-alpha.3",
    "bootstrap-sass": "^3.3.7",
    "buble": "^0.14.2",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  },
  "dependencies": {
    "admin-lte": "^2.3.7",
    "node-sass": "^3.13.0"
  }
}

Manriquez

Have you run npm install or yarn, to install dependencies? – Companionable

We cannot help, because we're seeing error messages like you and it's saying the problem is either in the elixir declaration in gulpfile.js, or in the package.json declarations. Please share your code. – Amieeamiel

@MayeenulIslam vai, I added those files. – Manriquez

And you ran npm install first and then gulp, right? – Amieeamiel

@AntonioCarlosRibeiro, I used npm install, but could not get any solution. – Manriquez

@MayeenulIslam vai, yes. – Manriquez

Answer 1

If your using Laravel 5.5 or above, simply add:

mix.webpackConfig({ node: { fs: 'empty' }})

to your webpack.mix.js file.

Greige

Please note in webpack > 5, you now have to use mix.webpackConfig({ resolve: { fallback: { fs: false } } – Hershey

@DamilolaOlowookere Thanks so much! Been trying to fix this for so long! – Penetrate

@DamilolaOlowookere thanks, this is what I needed for laravel 8. – Channel

Answer 2

Try adding

Elixir.webpack.mergeConfig({
  node: {
    fs: 'empty',
  }
});

To your gulpfile.js. Looks like this is a known webpack problem. Here's your file edited:

var elixir = require('laravel-elixir');

require('laravel-elixir-vue');

Elixir.webpack.mergeConfig({
  node: {
    fs: 'empty',
  }
});


elixir(function(mix) {
    mix.sass('app.scss');
});


elixir(function(mix) {
   mix.webpack('app.js');
}); 


elixir(function(mix) {
    mix.version(['css/app.css', 'js/app.js']);
});

Companionable

Thanks for reply. How can I use that ? – Manriquez

As I said in the anwser, add to your gulpfile.js. Edited to show how – Companionable

@Thanks for your reply. I am getting new error now. i.sstatic.net/JZhL6.png – Manriquez

Looks like it's not finding webpack, but that command is working where, Laravel 5.3 too, so try elixir in small caps – Companionable