Browserify: fs.readFile is not a function (v 3.1.0)

[davidebaldini]

To support DOM in HTML5 web workers, I do:

$ browserify -r /usr/local/lib/node_modules/jsdom/lib/jsdom.js:jsdom >jsdom_browserify.js

In the HTML page:

<script src='/src/lib/jsdom_browserify.js'></script>
<script>
    jsdom = require('jsdom');
    jsdom.env( ... );
</script>

On the browser (Iceweasel 31) console I get:
TypeError: fs.readFile is not a function jsdom_browserify.js:49261

jsdom version: 3.1.0

I read a Domenic's post from here dated Oct 10, 2014 stating "jsdom works in the browser with browserify now".

I guess he refers to jsdom version 1.0.1 or 1.0.2, released during that time.
Am I correct? Do newer jsdom releases work with browserify? Would an older version work on browsers?

[domenic]

To browserify jsdom, you need to have another project that does require("jsdom") and then browserify that. If you do that, it will properly respect the package.json "browser" directives. Manually using the browserify CLI on a specific file inside jsdom will not work.

[davidebaldini]

Thank you domenic for clarification.
I encapsulated jsdom into a wrapper: (jsdom_capsule.js)

(function () {

    var jsdom = require('jsdom');
    module.exports = jsdom;

}());

Then:
browserify -r ./jsdom_capsule/lib/jsdom_capsule:jsdom_capsule >jsdom_browserify.js

and in the HTML page:

<script src='/src/lib/jsdom_browserify.js'></script>
<script>
    jsdomCapsule = require('jsdom_capsule');
    jsdomCapsule.env( ... );
</script>

But the browser's error console still yields:

TypeError: fs.readFile is not a function
(file: jsdom_browserify.js:122)

[domenic]

It's possible we've introduced a regression recently, but it seems unlikely, given how we are running tests on the browserified code every build. I'll try to look into this more. I assume you're using the latest version of browserify?

[davidebaldini]

Latest version, browserify 8.1.3.

The line referred to by my browser's error console is pastebin here (highlighted).

[davidebaldini]

I stripped down the HTML part to the minimal, to no avail:

<script src='/src/lib/jsdom_browserify.js'></script>
<script>
    jsdomCapsule = require('jsdom_capsule');
    jsdomCapsule.env(
        '<div></div>',
        function (errors, window) {
            console.log('message');
        }
    );
</script>

Produces: "TypeError: fs.readFile is not a function"
Maybe this is browserify not defining the function?

[davidebaldini]

This is not a regression.
I browserified and tested all the following versions of jsdom:

• 3.1.0
• 1.2.1
• 1.1.0
• 1.0.3

All them present the same exact error on browser's console: "TypeError: fs.readFile is not a function".
Browserify version 8.1.3 for all tests above.

Test method:

The test method is the same as for my previous posts:

1. jsdom_capsule.js:

(function () {

    var jsdom = require('jsdom');
    module.exports = jsdom;

}());

2. Browserify:

ulimit -n 2560
browserify -r ./jsdom_capsule/lib/jsdom_capsule:jsdom_capsule >jsdom_browserify.js
cp jsdom_browserify.js ${web}/src/lib/jsdom_browserify.js

3. HTML code loaded on browser:

<script src='/src/lib/jsdom_browserify.js'></script>
<script>
    jsdomCapsule = require('jsdom_capsule');
    jsdomCapsule.env(
        '<div></div>',
        function (errors, window) {
            console.log('message');
        }
    );
</script>

No errors nor any stdout printed by ./browserify.

[Sebmaster]

Ahh, looks like in our CI runs we include browser-fs.js, which is why it works in our tests.

Can you try your html with:

<script src='/src/lib/jsdom_browserify.js'></script>
<script>
    jsdomCapsule = require('jsdom_capsule');
    jsdomCapsule.env({
        html:  '<div></div>',
        done: function (errors, window) {
            console.log('message');
        }
    });
</script>

This should not call fs.readFile and therefore work.

[davidebaldini]

Wow, thank you @Sebmaster, that works.
Your snippet also works w/o the need of jsdom_capsule.js wrapper; I can browserify and <script src= jsdom naked alone.

[domenic]

@Sebmaster we should probably add "fs": "...browser-fs.js" to package.json, don't you think?

[Sebmaster]

@domenic Not too sure about the automatic XHRs, but it's probably for the best.