Cannot resolve module 'fs'

[brenwell]

Hey there, thanks for the loader,

I get the following warning when running Webpack with this loader.

WARNING in ./~/jade/lib/runtime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Username/Dev/www/project/node_modules/jade/lib
 @ ./~/jade/lib/runtime.js 180:18-31

I think found a possible solution which I think you actually gave @sokra. https://gitter.im/webpack/webpack/archives/2014/08/26 looks like you need to add

"browser": { "fs": false }
https://github.com/kangax/fabric.js/blob/master/package.json#L17-L21

Could be alos that I screwed something up, thanks in advance for any help

[sokra]

You removed the default "web_modules" from the resolve.modulesDirectories option.

[brenwell]

I am not sure what you mean, however here is my webpack.config.coffee

# See webpack.config.js for more examples:
# https://github.com/webpack/webpack-with-common-libs/blob/master/webpack.config.js

path = require 'path'
webpack = require 'webpack'
CommonsChunkPlugin = require "webpack/lib/optimize/CommonsChunkPlugin"

module.exports =

  contentBase: "#{__dirname}/src/"

  cache: true

  entry:
    app: './src/coffee/app'
    head: './src/coffee/head'

  output:
    path: path.join(__dirname, 'build')
    publicPath: '/'
    filename: '[name].js'
    chunkFilename: '[name].js'

  plugins:[
    new CommonsChunkPlugin "commons.js", ["app"]
    new webpack.ResolverPlugin([
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin( "bower.json", ["main", ["main", "1"]], )
    ], ["normal", "loader"])
  ]

  module:
    loaders: [
      {
        test: /\.coffee$/
        loader: 'coffee-loader'
      }
      {
        test: /\.json$/
        loader: 'json-loader'
      }
      {
        test: /\.css$/
        loader: 'style-loader!css-loader'
      }
      {
        test: /\.less$/
        loader: 'style-loader!css-loader!less-loader'
      }
      {
        test: /\.jade$/
        loader: 'jade-loader'
      }
      {
        test: /\.html$/
        loader: 'html-loader'
      }
      {
        test: /\.woff$/
        loader: 'url-loader?prefix=font/&limit=5000&minetype=application/font-woff'
      }
      {
        test: /\.ttf$/
        loader: 'file-loader?prefix=font/'
      }
      {
        test: /\.eot$/
        loader: 'file-loader?prefix=font/'
      }
      {
        test: /\.svg$/
        loader: 'file-loader?prefix=font/'
      }
      {
        test: /\.png$/
        loader: "url-loader?prefix=img/&mimetype=image/png"
      }
      {
        test: /\.jpg$/
        loader: "url-loader?prefix=img/&mimetype=image/jpg"
      }
      {
        test: /\.gif$/
        loader: "url-loader?prefix=img/&mimetype=image/gif"
      }
    ]

  resolve:
    extensions: ['', '.webpack.js', '.web.js', '.coffee', '.js', '.json', '.jade', '.html', '.less', '.css']
    modulesDirectories: ['src', 'src/js', 'web_modules', 'bower_components', 'node_modules']
    root: [path.join(__dirname, "src")]
    alias:
      # config: 'json/config-local'
      routes: 'json/routes'
      industries: 'json/industries'
      colors: 'json/colors'
      constants: 'json/constants'
      countries: 'json/countries'

      router: 'coffee/router/router'
      navbar: 'coffee/view/widget/navbar-widget'
      footer: 'coffee/view/widget/footer-widget'

      config: 'coffee/manager/config-manager'
      network: 'coffee/manager/network-manager'
      sync: 'coffee/manager/sync-manager'
      auth: 'coffee/manager/auth-manager'
      storage: 'coffee/manager/storage-manager'
      permission: 'coffee/manager/permission-manager'
      toast: 'coffee/manager/toast-manager'
      tracking: 'coffee/manager/tracking-manager'

      me: 'coffee/model/me-model'

      util: 'coffee/helper/util'
      redirect: 'coffee/helper/redirect'

      baseCollection: 'coffee/base/base-collection'
      baseModel: 'coffee/base/base-model'
      baseManager: 'coffee/base/base-manager'
      baseView: 'coffee/base/base-view'
      baseFormPageView: 'coffee/base/base-form-page-view'
      baseRouter: 'coffee/base/base-router'
      baseSingleton: 'coffee/base/base-singleton'

      bootstrapCss: 'bootstrap/dist/css/bootstrap.min'
      fontawesomeCss: 'font-awesome/css/font-awesome.min'

      bootstrapJs: 'bootstrap/dist/js/bootstrap.min'
      # bootstrapAffix: 'bootstrap/js/affix'
      # bootstrapAlert: 'bootstrap/js/alert'
      # bootstrapButton: 'bootstrap/js/button'
      # bootstrapCarousel: 'bootstrap/js/carousel'
      bootstrapCollapse: 'bootstrap/js/collapse'
      bootstrapDropdown: 'bootstrap/js/dropdown'
      bootstrapModal: 'bootstrap/js/modal'
      bootstrapPopover: 'bootstrap/js/popover'
      # bootstrapScrollspy: 'bootstrap/js/scrollspy'
      # bootstrapTab: 'bootstrap/js/tab'
      bootstrapTooltip: 'bootstrap/js/tooltip'
      bootstrapTransition: 'bootstrap/js/transition'

      moment: 'momentjs'
      store: 'store.js'
      timezone: 'jsTimezoneDetect'
      intlTelInputJs: 'intl-tel-input/build/js/intlTelInput.min'
      intlTelInputCss: 'intl-tel-input/build/css/intlTelInput'
      timepicker: 'brenwell-timepicker/js/bootstrap-timepicker'
      timepickerCss: 'bootstrap-3-timepicker/css/bootstrap-timepicker.min.css'
      spin: 'spinjs/spin.js' # keep this an jspin
      jspin: 'spinjs/jquery.spin.js' #add jquery support to spin.js
      toastrCss: 'toastr/toastr.min.css'
      toastrJs: 'toastr/toastr.min.js'

[zalad]

add this to your config:

node: {
  fs: "empty"
}

[brenwell]

Worked! Thanks alot @zalad

[NicoleY77]

+1

[omerts]

Can someone please explain what does the above config do?

[brenwell]

@omerts I can try but the question seems a little broad, is there something specific about it you wish to understand?

[omerts]

@brenwell how does it solve the problem, does it cause webpack to mock the fs module during compilation time? Is there any doc about such configs?

[brenwell]

Not sure about any docs, but yes I believe this creates an empty module for fs.

[omerts]

@brenwell ok thank you :)

[dimitardanailov]

Worked! Thanks alot @zalad

[jedwards1211]

I don't understand why I'm getting this error, because I'm only using the path module in my webpack.config.js. Shouldn't it only complain if my browser code accidentally requires path?

[afoysal]

@zalad, Where to add that code and how to add that code ?

[SeanWangDev]

@afoysal in case anyone is still confused. it should be added like:

var config = {
    node: {
        fs: "empty"
    }
}

[heregoes]

I have already added that code but unfortunately I am still having the same error. Below is my code

module.exports = {
entry: __dirname + "/app/assets/scripts/app.js",

output: {
    path: __dirname + "/app/temp/scripts",
    filename: "app.js"
},
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: 'node_modules',
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            },
            
            

        }
    ]
},
 node: {
    fs: 'empty',
    // tls: 'empty'
}

}

[MrCoder]

@omerts (just my guess) setting fs to empty tells webpack that there is NO implementation of the fs module. Take a look at this node-lib-browser module. By default, webpack's target is 'web'. There is no implementation for some of the node core libraries, such as fs, os, net, etc. That is where 'node-lib-browser' comes into the picture. For fs, there is NO implementation, and thus should be set as empty.
You may want to first check why you have fs as a dependency.

[sokra]

add this to your config:

node: {
fs: "empty"
}

This can also be fixed on library level. The library using fs can add this to the package.json:

"browser": {
  "fs": false
}

to say: "For browser build I don't need the fs package. Give me an empty one.".

[sergioadonis]

I solved with:
target: "async-node"

target: "async-node"

[paulkia]

add this to your config:

node: {
  fs: "empty"
}

When I do this and console.log(fs); it just returns

▼ {}
  ⯆ __proto__:
    ⯈ constructor: ƒ Object()
    ⯈ __defineGetter__: ƒ __defineGetter__()
    ⯈ __defineSetter__: ƒ __defineSetter__()
    ⯈ hasOwnProperty: ƒ hasOwnProperty()
    ⯈ __lookupGetter__: ƒ __lookupGetter__()
    ⯈ __lookupSetter__: ƒ __lookupSetter__()
    ⯈ isPrototypeOf: ƒ isPrototypeOf()
    ⯈ propertyIsEnumerable: ƒ propertyIsEnumerable()
    ⯈ toString: ƒ toString()
    ⯈ valueOf: ƒ valueOf()
    ⯈ toLocaleString: ƒ toLocaleString()
    ⯈ get __proto__: ƒ __proto__()
    ⯈ set __proto__: ƒ __proto__()

Is this caused by the 'empty' keyword? For reference, I'm using an electron-aurelia-webpack ES6 set-up.