4

Help! I'm trying to use jquery in my node.js app, but I keep getting an error when I try to use '$', saying "$ is not defined"... but I defined it at the top! Here's what I did:

I installed both packages from npm like so:

npm install jquery
npm install jsdom

then I required them in my node.js app:

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }
    var $ = require("jquery")(window);
});
doSomething();

Then I'm trying to use it like so:

function doSomething(){
    var deferred = $.Deferred();
}

and I get the following error:

var deferred = $.Deferred();
               ^
ReferenceError: $ is not defined

Do you think that the function is getting executed before the var $ = part?

Thanks!

Versions:

  • Node: 4.2.6
  • Express: 4.12.4
  • JQuery: 2.2.3
  • JSDom: 8.3.0

Update: Solution

Here's what I ended up using, based on everyone's answers!

var $;
require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }
    $ = require("jquery")(window);
    doSomething();
});

5 Answers 5

3

Your doSomething function is declared outside if the bounds of the jsdom.env function. $ is only accessible inside that callback. Something like this should work:

var $;

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }
    $ = require("jquery")(window);
    doSomething();
});

 function doSomething(){
    var deferred = $.Deferred();
}

Though I think it would be more idiomatic to just declare doSomething inside the callback. That way it would have access to jquery from the outer scope.

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    function doSomething(){
        var deferred = $.Deferred();
     }
    var $ = require("jquery")(window);
    doSomething();
});
Sign up to request clarification or add additional context in comments.

1 Comment

bummer I thought I could get away with putting it up top and forgetting about it! This works great, thanks :)
1
//make sure $ is available in the global scope
var $;

function doSomething(){
    var deferred = $.Deferred();
}

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }
    // assign it
    $ = require("jquery")(window);

    // you have to call it in here because you are in a callback 
    doSomething();
});

Comments

1

If you don't need a full DOM available and just want to parse and scrape/manipulate html elements, there is cheerio which is more lightweight than jsdom and still gives you a jQuery-like API.

Comments

1

All you need to do is to move the call doSomething() inside your callback function right after $ initialization.

// define global variable for further usage
var $;

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    // initialize global variable
    $ = require("jquery")(window);

    // will work properly here
    doSomething();
});

function doSomething() {
    // using already initialized global variable
    var deferred = $.Deferred();
}

In your example there are 2 things you need to take care:

1. Asynchronous functions

We need to guarantee doSomething will be called only after $ initialization.

2. Variable scopes

It really makes sense what is the place you declared doSomething function and in your example doSomething doesn't know $ exists at all. So we need to define it somewhere (e.g. globally) to make a closure with $ variable.

Comments

0

For current jsdom ([email protected]) it seems that the correct way to use jquery is:

var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

var $ = jQuery = require('jquery')(window);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.