Getting `Uncaught ReferenceError: $ is not defined` for $ in jquery in Node app

Question

I had some files(html, css, js) deployed on a Apache Tomcat server. The html file make use of the below known libraries.

   <script src="libs/external/jquery/dist/jquery.min.js"></script>
   
   <link rel="stylesheet" href="libs/external/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="libs/external/bootstrap-select/dist/css/bootstrap-select.min.css" />
  
   <script src="libs/external/popper.js/dist/umd/popper.min.js"></script>
   <script src="libs/external/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="libs/external/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

Now I want the same application to be served through Node JS Server.

I am new to node.

I created a app.js file and did the below basic stuff

var http = require('http'),
    url = require('url'),
    fs = require('fs');


var createServerCallback = function (req, res) {

    let url_parts = url.parse(req.url);
    let filePath = url_parts.pathname;

    let extension = '';
    let contentType = 'text/html';

    if (filePath == '/') {
        filePath = '/index.html';
    }

    if (url_parts.pathname.lastIndexOf(".") !== -1) {
        extension = url_parts.pathname.substring(url_parts.pathname.lastIndexOf("."));
        switch (extension) {
            case '.js':
                contentType = 'text/javascript';
                break;
            case '.css':
                contentType = 'text/css';
                break;
        }
    }
    let path = "." + filePath;

    fs.readFile(path, function (err, data) {
        res.writeHead(200, { 'Content-Type': contentType });
        res.end(data);
    });
    
};

http.createServer(createServerCallback).listen(8010, 'localhost');
console.log('Server running.');

The structure is as below-

index.html is the main file which internally references the scripts revealed above, maintained under libs folder.

All was working good but now I am getting Uncaught ReferenceError: $ is not defined.

As the jquery code in index.js will be executed in the browser window, what does node has to do with it?

It looks like you are accessing inside your node process. Switch to your browser console instead and you will have access to jQuery. — Niels B.
– Niels B., Commented Sep 20, 2020 at 8:39

Quentin · Accepted Answer · 2020-09-20 08:36:10Z

1

As the jquery code in index.js will be executed in the browser window, what does node has to do with it?

Look at the command line you are executing in your IDE.

You are explicitly loading index.js with Node.js!

Probably you hit some "Debug this JS file" button or key combination in your IDE and it is set to process JS files in Node.js.

Load the HTML document in your browser instead (after starting your Node.js program by running app.js with Node.js instead of index.js.

answered Sep 20, 2020 at 8:36

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting `Uncaught ReferenceError: $ is not defined` for $ in jquery in Node app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related