3

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?

2
  • 1
    I think I got what is wrong. I confused server side module and client side workflow:) Oct 31, 2017 at 14:44
  • 2
    Yes. webpack has a configuration option 'target' (webpack.js.org/concepts/targets) that you can use in your config file. Set "target: 'node'" if you are bundling for nodejs. For client-side/browser set "target: 'web'". To do both server/client-side see medium.com/code-oil/…
    – nethsix
    Apr 15, 2018 at 2:07

4 Answers 4

4

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.

1
  • Please explain what this code does and how it works.
    – Tigerrrrr
    May 7 at 6:00
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",
},
...
0

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.`
0
// 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,
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.