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

I produced a small code for building by webpack. The source entry file is like:

import archiver from 'archiver'
import request from 'request'
import mkdirp from 'mkdirp'
import Zip from 'node-zip'
import Zlib from 'zlib'
import path from 'path'
import fs from 'fs'

export default class myTestClass {


   constructor (config) {

    super (config)

   }

  //......
}

The webpack config is:

var webpack = require('webpack');
var path = require('path')


module.exports = {
    entry: [
        path.resolve("./js/app.js") 
  ],
   output: {
      path: path.resolve('./build'),
      filename: "build.js"
  }, 
  module: {
     loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },

        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015'],
              plugins: ['transform-runtime']
            }
        } 
        
    ]
    
},

resolve: {
    modules: [
      "./js", 
      "./node_modules"
    ],
    extensions : ['.js', '.jsx', '.json']
  },
  resolveLoader: {
    modules: ['node_modules']
  },
  node: {
    console: true
 },
 plugins: [
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    Promise: 'bluebird',
    jQuery: 'jquery',
    $: 'jquery'
  })
 ]
};

The main app.js simply calls myTestClass:

import MyClass from './myTestClass.js'

module.exports = async function() {
  
 const myCls = new MyClass();

return '';
};

Running webpack, I got many same errors:

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

If I followed the comment in https://github.com/webpack-contrib/css-loader/issues/447 , i.e.

node:{
   fs:'empty'
 }

It can be built, but when running the code on client, an error will pop out from the build.js. The error is: fs is undefined. I think this is because fs of node is set to empty.

var fs$ReadStream = fs.ReadStream
ReadStream.prototype = Object.create(fs$ReadStream.prototype)
ReadStream.prototype.open = ReadStream$open

Could you shed a light how to solve this issue? is that a correct usage to set fs = empty? IF it is correct, what issue with the build.js?

node.jswebpack


Solution 1:[1]

You can require fs on client side using the following code in webpack.config.js

var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

also add inside module.exports

  externals: nodeModules,
  target: 'node',

this would help you to require fs inside client side.

Solution 2:[2]

In case with Webpack 4 i got same error:

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

I fixed this error by adding section to root of webpack.config.js file:

...
node: {
  fs: "empty",
},
...

Solution 3:[3]

At some point, I had used this include:

import { TRUE } from "node-sass";

I simply commented it out. I was running all over the place trying to figure out what changed! Moral: sometimes it's not about chasing the error ONLY (because I was getting all kinds of suggestions). It's also about reviewing what you've done!

Here is the FULL error with the uncommented code:

`WARNING in ./node_modules/node-sass/lib/binding.js 19:9-37
 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/fs.realpath/index.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\fs.realpath'
 @ ./node_modules/fs.realpath/index.js 8:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/fs.realpath/old.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\fs.realpath'
 @ ./node_modules/fs.realpath/old.js 24:9-22
 @ ./node_modules/fs.realpath/index.js
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/glob/glob.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\glob'
 @ ./node_modules/glob/glob.js 43:9-22
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/glob/sync.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\glob'
 @ ./node_modules/glob/sync.js 4:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/mkdirp/index.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\mkdirp'
 @ ./node_modules/mkdirp/index.js 2:9-22
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/node-sass/lib/extensions.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\node-sass\lib'
 @ ./node_modules/node-sass/lib/extensions.js 6:7-20
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js
 i ?wdm?: Failed to compile.`

Solution 4:[4]

// Add somewhere close to the bottom directly above 

devtool: options.devtool ...

node: { fs: 'empty' },

// This will cause the webpack to ignore fs dependencies.

i.e.

  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  node: { fs: 'empty' },
  devtool: options.devtool,
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 illiteratewriter
Solution 2 Sergio Belevskij
Solution 3 logixplayer
Solution 4 ouflak

Related Questions