Browserify with require('fs')

Question

I was trying to use browserify on a file that uses the fs object. When I browserify it, the call to require('fs') doesn't get transformed and require returns {}.

Is there any workaround for this? I've seen some suggestions on stackoverlow and elsewhere, but none seem to be fully realized.

I actually hoped to create a google web packaged app using browserify for a class I teach.

Thanks in advance.

Solution 1

Which filesystem should the browser use then? The HTML5 filesystem is not really comparable to a traditional filesystem. It doesn't have symlinks, and it is only accessible asynchronously outside Web Workers.

So the answer is: Write an abstraction layer yourself that can rely on the fs module when running in Node.js, and the HTML5 FS API when running in the browser. The differences are too large to have browserify translate for you.

Solution 2

If you want to inline file contents from fs.readFileSync() calls, you can use brfs:

var fs = require('fs');
var src = fs.readFileSync(__dirname + '/file.txt');

then do:

browserify -t brfs main.js > bundle.js

and src will be set to the contents of file.txt at compile time.

Solution 3

If you want to run file system with browserify you can install npm.

npm install browserify-fs 

and you can access fs object on client side.
Thanks

Solution 4

Is it necessary for you to use require (fs) , you could always use html5 file reader api to read files in javascript.

window.onload = function() {
    var fileInput1 = document.getElementById('fileInput');
    if (fileInput1){
        fileInput1.addEventListener('change', function(e) {
            var file = fileInput1.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log(reader.result);
                  }    
                reader.readAsText(file);                    
            } 
        });
    }
}

you will also have to insert a input file in the html side.

View more solutions

Comments

[Fred Finkle]

I guess I would expect at the least that browserify would leave a comment in the browserified code indicating that it doesn't support the fs module.

[Fred Finkle]

Probably an "abstraction layer" isn't appropriate here, but an implementation of FileReader etc in node.js might be (as part of browserify).<br/> Anyways, I'm happy to know that the missing transformation is a feature and not a "bug" on my part.

[Fred Finkle]

Interesting idea, but doesn't meet my needs.

[Preprocezzor]

I actually installed browserify-fs and required it but I still get the same error called "fs.readFileSync is not a function"