1

I have a node module that uses modules that depend on fs like making use of fs.readFileSync etc. I cannot manually remove those dependencies since are at 2nd or 3rd level of the package dependencies having level 0 my root module.

Given that, I have to run those modules in the browser, so I have tried both browserify and webpack. My webpack configuration is the following

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

module.exports = {
  entry: './pgapi',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    noParse: /node_modules\/json-schema\/lib\/validate\.js/,
    loaders: [
      { test: /\.json$/, loader: 'json-loader' }
      , {
          test: /\.js$/,
          loader: "transform?brfs"
        }
    ]
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js']
  },
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  plugins: [
        //new webpack.optimize.UglifyJsPlugin(),
        //new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            __DEV__: true
        })
    ]
};

and I'm using browserify as alternative with the brfs transform to try to take care of the fs.readFileSync etc.

After building the bundle.js I run babel since when in Safari there is no complete compliance to ES5 strict mode and also it take cares of the arrow operator and of let and const that are not supported as well using this script:

var fs = require('fs')
var args = process.argv.slice(2);
var code=fs.readFileSync(args[0])
var res=require("babel-core").transform(code, {
  plugins: [
     "transform-es2015-arrow-functions",
     "transform-es2015-constants",
     "transform-es2015-block-scoping"]
});
console.log(res.code)

So I do like $ webpack or $ browserify mymodule.js -o dist/bundle.js -t brfs

and then on dist/bundle.js

$ node babelify.js dist/bundle.js > out.js.

What happens then is a ReferenceError: Can't find variable: fs (see here) that seems to be due to the fact that the brsf transform does works on static expression eval so that it does not understand variables in fs.readFileSync(varname). I'm using MacGap in Xcode test the WebView client code on El Capitan.

How to get rid of this at build time?

loretoparisi
  • 15,724
  • 11
  • 102
  • 146
  • 2
    How would you get files in a browser that has no access to the filesystem anyway ? – adeneo Jul 23 '16 at 20:31
  • I do not need that, it's required by dependencies, some of which I'm not using at all, but I cannot remove them. In other cases it's like local `json`files that the `brsf` transform will load at build time - see the link about that. The problem seems to be that the static evaluation of `brfs` does not take in account all cases of most of modules that makes use of variables when calling `fs.readFileSync(fileName)`, etc. – loretoparisi Jul 23 '16 at 20:32
  • http://stackoverflow.com/questions/16640177/browserify-with-requirefs – adeneo Jul 23 '16 at 20:36
  • @adeneo yes I know that one but there you can do `var src = fs.readFileSync(__dirname + '/file.txt');`, here I cannot modify submodules, since I get them from the official repo, and just build them. – loretoparisi Jul 23 '16 at 20:40
  • 1
    I have no idea? Again, the browser can't access files, so "browserifying" the `fs` module really makes no sense to me, and your depencies won't be able to get the files they are trying to get anyway? – adeneo Jul 23 '16 at 20:42
  • Yes formally that is true, but you know it's a syntax error at compile time, no code in my module would call any submodules that are requiring `fs`, it's a dependency of some sub-modules, like module `mime` - mime types modules, makes use of `fs.readFileSync` somewhere, but I would never do that call at run time. And `protobuf` module as well, etc. – loretoparisi Jul 23 '16 at 20:45
  • Then, you need to clean up the code you're including so it doesn't use things that won't work client-side. It sounds like you're trying to include a giant fur ball of code, some of which could only work on the server rather than carefully sorting out what really belongs on the client. – jfriend00 Jul 23 '16 at 23:06
  • What happens with npm is that if you build a module A that depends on B and C, and C depends on D and E, while B depends on D, your module will end up depending on B,C,D,E at some version. Since you cannot modify level 1 dependencies B and C, you must include D and E, that's a big issue with npm I think, that was addressed putting all modules at root level in the `node_modules` folder to dedup submodules, but there are too much depth of dependencies at the end. – loretoparisi Jul 24 '16 at 11:44

1 Answers1

0

I had a similar issue.

Identify which module is calling mime and find an alternative module. For me, this was url-loader which depends on mime.

I replaced it with file-loader which doesn't depend on mime, and hence not the fs. Ensure to uninstall url-loader as it will still throw the error!

Tunaki
  • 132,869
  • 46
  • 340
  • 423
Linx8
  • 64
  • 4