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

Answer 1

If your using Laravel 5.5 or above, simply add:

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

to your webpack.mix.js file.

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']);
});