node can't load app because it doesn't recognise jQuery

Question

I'm trying to use Node to debug a Javascript file that contains some JQuery. but when loading files it gets not recognized on $. I've installed JQuery to local package (npm install jquery -save-dev).

"npm jquery -version" result is 6.9.8

Code:

$("#modalAddRole").on("modal:visible", function () {
    $("#roleName").val("");
    $("#roleName").focus();
});

Take a look at the answers to [this question](https://stackoverflow.com/questions/1801160/can-i-use-jquery-with-node-js) — Titus, Jul 27 '19 at 13:50
@TheRuler — There's no such thing as 'jQuery syntax'. jQuery is just a collection of objects written in regular JavaScript syntax. — Quentin, Jul 27 '19 at 18:33
@Quentin and this collection is the syntax. but please have your opiniion — SteinTheRuler, Jul 27 '19 at 18:53
@TheRuler — It's not an opinion. Syntax has a specific meaning. — Quentin, Jul 27 '19 at 19:13
@Quentin I'm sorry but discussing this isn't on the top of my list. if you believe jQuery is not syntax, good for you — SteinTheRuler, Jul 27 '19 at 19:34
You don't want to use node for this. You want to use your browser console. — pguardiario, Jul 28 '19 at 00:15

score 2 · Answer 1 · answered Jul 27 '19 at 14:25

jQuery manipulates the dom.

node.js does not have a dom.

You'll need to create a virtual dom (that does not display)

for that use jsdom to load your webpage/app and then execute whatever dom manipulation code you want.

Example:

const jsdom = require("jsdom");
const {JSDOM} = jsdom;
const jquery = require('jquery');

JSDOM.fromURL("https://url_To_Your_WebPage_Local_Or_Remote.com")
  .then(dom => {
    const $ = jquery(dom.window);
    //your jQuery code here
  })

score 0 · Answer 2 · answered Jul 27 '19 at 18:32

I've installed JQuery to local package

Installing it isn't enough. You need to load it into your program…

const $ = require('jquery');

… and then $("#modalAddRole") isn't going to do anything until you load your HTML into it.

See the documentation:

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.
require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);
});

But this seems like a very complicated approach to getting a debugging environment running. Assuming the production environment for the code in the browser, it would make a lot more sense to debug it in the browser.

Browsers have excellent debugging tools built-in these days, and simulating all the things browsers do by default is likely to make debugging harder because the debug environment is signficantly different to the production environment.

I usually used the browser for debugging, but always curious about other methods — SteinTheRuler, Jul 27 '19 at 19:36

node can't load app because it doesn't recognise jQuery

2 Answers2