Electron.js / jQuery UI - Uncaught ReferenceError: jQuery is not defined

Question

When I start my program I get this message:

Uncaught ReferenceError: jQuery is not defined
at jquery-ui.min.js:6
at jquery-ui.min.js:6

I am not sure what I am doing wrong, I am not using jQuery or jQuery UI in my index.js. This is my HTML file:

EDIT: This is an Electron.js app. I have answered my own question.

Perhaps NodeJS isn't setup right to return files in `/external/jquery`? What if you put `../jquery-ui-1.12.1.custom/jquery.min.js` in the `src` instead? — Marco de Zeeuw, Sep 15 '17 at 18:03
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Erik Philips, Sep 15 '17 at 18:31
@Eric I have answered my own question. I think it is different from the possible duplicate — Daniel, Sep 15 '17 at 18:44
I don't see any sign of an inclusion of `jQuery` prior to `jQueryUI` — Vivick, Sep 16 '17 at 08:49

Scott Marcus · Answer 1 · 2017-09-15T18:16:34.973

3

jQuery UI doesn't work unless you first declare the main jQuery library. If jQuery doesn't get loaded properly, jQuery UI will fail with the error you are getting.

You have two declarations, but the first one appears to ask for the right file (jquery.js), but from the wrong path and so jQuery isn't getting loaded. If you were to open your browser's developer tools (F12) and look at the "Network" tab, you'd most likely see that file request is returning with a 404 error.

It's also important to note that the version of jQuery UI you reference has a dependency on a certain version of jQuery. If you are not referencing the correct jQuery version, that could cause the error as well.

If you do need to use jQuery UI, you need this (adjust for your versions though and note that type=text/javascript and language=javascript haven't been needed in many years.):

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

You can get the correct Content Delivery Network (CDN) paths here:

But, if you are not using jQuery or jQuery UI in the page then remove both those lines.

edited Sep 15 '17 at 18:16

answered Sep 15 '17 at 17:52

Scott Marcus

64,069
6
49
71

Looking at the name of the js-file, I suppose the first one is jQuery and not jQuery-ui? – Marco de Zeeuw Sep 15 '17 at 17:54
@MarcodeZeeuw The file name may be right, but the path appears wrong, hence jQuery isn't getting loaded and thus, the error. – Scott Marcus Sep 15 '17 at 17:56
Hi, thank you for your answer. the first script is jQuery and the second jQuery UI, both paths are correct, vs code can navigate to both with cmd + 'click'. A strange thing is that if I replace my code with your snippet it still does not work, same error – Daniel Sep 15 '17 at 18:01
@Daniel Open your browser's developer tools (F12) and click over to the "Network" tab and then refresh the page. Are you getting any 404 errors? – Scott Marcus Sep 15 '17 at 18:05
@epascarello The file names look right, but the path to jQuery seems incorrect. – Scott Marcus Sep 15 '17 at 18:05
@Scott I am getting 200 on everything, including my jQuery and jQuery UI – Daniel Sep 15 '17 at 18:11
@Daniel Have you verified that you have the correct version of jQuery for the version of jQuery UI that is referenced? – Scott Marcus Sep 15 '17 at 18:15
@Scott I used the jQuery UI Download Builder and it created all the files in the jquery-ui-1.12.1.custom folder except the 'jquery.min.js' which i added myself to test if it worked with another jQuery file, I have removed it. – Daniel Sep 15 '17 at 18:24
@Daniel So, you added a version of jQuery yourself and then removed it and now you are back to the version that the download builder gave you? Are you sure you didn't get those files mixed up? – Scott Marcus Sep 15 '17 at 18:26
same could hapen if you load jquery twice – Davor Mlinaric Sep 15 '17 at 18:31

score 2 · Accepted Answer · answered Sep 15 '17 at 18:40

I found the problem. Turns out that jQuery thinks it is in an enviroment without a window with a DOM.

From jQuery.js line 17:

    if ( typeof module === "object" && typeof module.exports === "object" ) {


    // For CommonJS and CommonJS-like environments where a proper `window`
    // is present, execute the factory and get jQuery.
    // For environments that do not have a `window` with a `document`
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real `window`.
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info.


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

Ghettofix solution:

Remove the entire 'if sentence' and keep only this: factory( global );

I am not sure why this happend but my best guess is that the Electron app, which both have a front-end with DOM and a backend without DOM, the jQuery chose the backend.

Electron.js / jQuery UI - Uncaught ReferenceError: jQuery is not defined

2 Answers2