Adminlte: Error: AdminLTE requires jQuery

[renatoabreuti]

HI,

When i run node AdminLTE on node project (netbeans), i got the error below :

Error: AdminLTE requires jQuery
at Object. (C:\UUUU\RRRR\WKSAdminLTE\dist\js\app.min.js:13:5592)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:136:18)
at node.js:963:3

Anyone can help ?
Thanks a lot

[eruvierda]

@renatoabreuti
Have you edit the JQuery path in your header/index file to match the current path in your project folder?
I faced the same problem last week and ask the owner why a feature not work, and OOPSSS its my fault that one of the JQuery path not pointing the right place

in the app.js I found this mention

//Make sure jQuery has been loaded before app.js
if (typeof jQuery === "undefined") {
  throw new Error("AdminLTE requires jQuery");
}

[almasaeed2010]

As @eruvierda said, you need to require jQuery before loading app.js.

[renatoabreuti]

@eruvierda, thanks for reply !!! this is make sense !!! i will try and feedback ....
@almasaeed2010, i've tried this ... using require('jQuery') in upper lines from my app.js .. but after solve jQuery reference i've got a jsdom.createwindo() is not a function error ... This error is throwing from jquery file ... After "googled" searching for the solution ... there is no right answer to my problem (several answers found and solve other problems for others issues .. but not in my case) .. thanks.

[REJack]

var $ = require('jQuery'); a require like this?

[renatoabreuti]

@REJack, exactly !!!

[eruvierda]

then its solved right?

[REJack]

@renatoabreuti please provide a example of your js-file.

A correct require looks like this :

var jsdom = require('jsdom').jsdom
  , myWindow = jsdom().createWindow()
  , $ = require('jQuery')
  , jq = require('jQuery').create()
  , jQuery = require('jQuery').create(myWindow)
  ;

The jQuery = require('jQuery').create(myWindow) part is important for AdminLTE.

[renatoabreuti]

@REJack, thanks ... the sample code in previous reply i've tried ... i will post my app.js

[renatoabreuti]

@REJack,
bellow my sample code app.min.js (not complete)

var jsdom = require('jsdom').jsdom
, myWindow = jsdom().createWindow()
, $ = require('jQuery')
, jq = require('jQuery').create()
, jQuery = require('jQuery').create(myWindow)
;
function _init(){"use strict";$.AdminLTE.layout={activate:function(){var ....

[renatoabreuti]

the actual erro is

C:\Users\Renato\workspaceAdminLTE-2.3.11\distjs\app.min.js:15
, myWindow = jsdom().createWindow()
^

TypeError: jsdom(...).createWindow is not a function
at Object. (C:\Users\Renato\workspaceAdminLTE-2.3.11\distjs\app.min.js:15:24)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:136:18)
at node.js:963:3

[REJack]

How you use AdminLTE in your app?
The example code is not for AdminLTE it self, its for your node app.

AdminLTE is not a nodejs app, the npm version self is for usage in nodejs apps. (Do not try to run AdminLTE's app(.min).js trought like node app.min.js

[almasaeed2010]

@renatoabreuti,

Have you resolved this issue? If so, please let us know. I am sure many will appreciate it if you post your solution.

Thanks!

[renatoabreuti]

@REJack,
Thanks for reply. Even if i run another app.js wich AdminLTE app.min.js is not my main class the error still happening .... For now i'm create an empty node app js ... and i'm using routes (express) to show adminLTE files (like a view) ... Even the error is happening in app.min.js because AdminLTE by self call this script ... In this way my responsive menu icon does not work and preference button (asside right) does not work .... I'm still workin to discover how to sove this ...

@almasaeed2010, congrats for you AdminLTE job ... it's great man !!! Sorry for later responses ... Here in Brazil is weekend so there another things wich i have do .... But between this things i'm working in Node JS App project using AdminLTE ... thank You !!

[renatoabreuti]

@REJack,,
in time ....
Error change to

ReferenceError: require is not defined
/dist/js/app.min.js:14:13

where dist/js is the scripts AdminLTE directory.

[REJack]

@renatoabreuti AdminLTE is not a nodejs app/module, its published in npm for usage in nodejs apps like bootstrap or other CSS Frameworks.

You need a (web/html)render process for this.

[renatoabreuti]

@REJack,
Thanks for help ... With yours and other helps ... I've understanded about how AdminLTE works ... The fact is ... By the owner the file app.min.js (even not a node app) is needed to pages works ... (Independent of rendering mode) but, in this file i've got the error ... Please see below print screen ... In this way even if i run this in html "basic" project (not on node App js ) the error is throwing in page script for the same way .... :-)

Note .. even if i dont run the app.min.js by the node ... the error ocurrs .. because in the html file is call to this js file and this js file use require("jsdom") ....

[renatoabreuti]

Solved ...
For my problem this works ...

I've used app.min.js from a previous version (wich i have in a old project v 2.3.2) ...
In this js file .. require or jsdom is not appear ... and init function not throw any error ... This way responsive left menu icon works and aside right too ...

Until now i dont see any other error on using just app.min.js from v2.3.2 in v2.3.8 AdminLTE app.
If i see any other trouble i will report ....

Thanks to all help (in specially @REjack for patience) ... And if anyone got a v2.3.8 work fine using app.min.js v2.3.8 please let me know how, so that, i can fix my application ... For now i use in this way ... just app.min.js v2.3.2

[juanma2413]

Lo mejor que podes hacer es interactuar con la clase con algo como esto:
$('#box_dato').addClass('collapsed-box');
y no vas a tener inconvenientes.
Suerte!

[ahmedali5530]

You can use webpack to auto provide jquery if you are using webpack. See https://webpack.js.org/plugins/provide-plugin/#usage-jquery