Browserify with jQuery >= 2 produces "jQuery requires a window with a document"

Question

I'm using browserify to bundle my front-end javascript using CommonJS-style dependencies. For example, I have:

$ = require('jquery/dist/jquery');  // v2.1.0-beta2                                                                                                                                                                       
_ = require('underscore');                                                                                                                                                                                 
Backbone = require('backbone');

However, when browserify bundles the dependencies I run into the following console error:

Error: jQuery requires a window with a document

Looking at the jQuery code, I see it's trying to use this for the global window.

(function( window, factory ) {
....
}(this, function( window ) {

Since browserify wraps all dependencies, this is an object, not the window.

What's interesting is jQuery >= 2 should be CommonJS compatible. However, the problem is how browserify wraps the dependencies. Has anyone solved this problem?

Answer 1

TL;DR;

In your case, it should be as simple as using;

$ = require('jquery/dist/jquery')(window);  // v2.1.0-beta2  

It might be obvious; but you'll have to use this form of declaration (pass window to the result of require) in every module you use, not just one/ the first, etc.

---

Non-TL;DR;

For anyone wanting to know why, the interesting code in jQuery which handles this is;

(function( window, factory ) {

    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // Expose a jQuery-making factory as module.exports in loaders that implement the Node
        // module pattern (including browserify).
        // This accentuates the need for a real window in the environment
        // e.g. var jQuery = require("jquery")(window);
        module.exports = function( w ) {
            w = w || window;
            if ( !w.document ) {
                throw new Error("jQuery requires a window with a document");
            }
            return factory( w );
        };
    } else {
        factory( window );
    }

// Pass this, window may not be defined yet
}(this, function( window ) {

    // All of jQuery gets defined here, and attached to the (locally named variable) "window".

}));

Note the comments at the top which explicitly address browserify; in situations where jQuery is in CommonJs-land, instead of returning jQuery as we know it, it returns a function which, when passed an object (which should be window), returns jQuery.

---

To confuse the matter further, this setup code has changed again in the latest commit, so that module.exports is determined like so;

module.exports = global.document ?
    factory( global ) :
    function( w ) {
        if ( !w.document ) {
            throw new Error( "jQuery requires a window with a document" );
        }

        return factory( w );

... such that if this is the window object when jQuery is require()'d, it will return a jQuery instance, or if not it'll return the factory function as before; so when 2.1.0 actually gets released, you'll have to remove the (window) call again.

Answer 2

var $ = require('./node_modules/jquery');

//replace sources

var jsdom = require("./node_modules/jsdom");
var window = jsdom.jsdom().createWindow();
var $ = require('./node_modules/jquery/dist/jquery')(window);

Answer 3

If you are using the latest version(6.x) of jsdom and the latest version of jquery(2.1.4), you can do this like:

var $ = require('jquery')(jsdom.jsdom().defaultView);

Answer 4

The solution above with CreateWindow() did not work for me.

However, the following allowed me to get the latest version of JQuery working in node:

var $ = require('jquery')(require("jsdom").jsdom().parentWindow);

Answer 5

I was also able to include it like Johnny Zhao did - but needed to include jsdom first.

I installed jquery and jsdom versjon: jquery@2.2.0 node_modules\jquery jsdom@7.2.2 node_modules\jsdom

Then ran:

var jsdom = require("jsdom");
var $ = require('jquery')(jsdom.jsdom().defaultView);

$("<h1>test passes</h1>").appendTo("body");
console.log($("body").html());