TL;DR;

Question

20

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

rated 0 times [ 25] [ 5] / answers: 1 / hits: 19242 / 11 Years ago, wed, december 4, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dezmondhumbertob

Add To Favorites

Follow

Total Points: 79

Total Questions: 112

Total Answers: 107

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

answered 11 Years ago kieraelsies · Accepted Answer

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.