And I continue to struggle with brunch…
I’m trying use the npm version of adminlte bootstrap template. I have the css finally working, but now I’m trying to get the JS working. I’m seeing the following JS console error in my browser:
jquery.js:3850 jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (http://localhost:4000/admin/countries:3:28)
at mightThrow (http://localhost:4000/js/app.js:3743:29)
at process (http://localhost:4000/js/app.js:3811:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js:3850
process @ jquery.js:3646
getDocumentSelection.js:51 Trying to get configured shortcut
getDocumentSelection.js:47 (2) ["Init Response", undefined]
jquery.js:3859 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (countries:3)
at mightThrow (jquery.js:3574)
at process (jquery.js:3642)
(anonymous) @ countries:3
mightThrow @ jquery.js:3574
process @ jquery.js:3642
Here is my brunch-config.js
file:
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: {
"js/app.js": /^(web\/static\/js)|(node_modules)/,
// "js/vendor.js": /^(web\/static\/vendor\/js)/
},
order: {
before: [
]
}
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
styles: { "admin-lte": [
"bootstrap/bootstrap.css",
"bootstrap/bootstrap-theme.css",
"dist/css/AdminLTE.css",
"dist/css/skins/_all-skins.css",
] },
enabled: true,
globals: {
$: 'jquery',
JQuery: 'jquery'
}
}
};
and here is my web/static/js/app.js
file:
import "phoenix_html"
require('jquery')
require('admin-lte')
Questions:
- How to I resolve the jQuery error?
- How do I include some of the plugins from the
admin-lte
package?
- Any suggestions on how I really learn brunch. I’m tired of the struggle I face everytime I try to do sometihng, especially with npm packages.
Where is this DataTable
on $()
's return being defined?
Maybe You can try to load jquery after admin-lte.
It might not be relevant at all, but sometimes loading order with jquery is important.
@OvermindDL1 Datatable is under node_modules/admin-lte/plugins/datatables
. I presume I need to require it, presumablely in app.js
, but now sure how since its bundled inside admin-lte
How is it bundled in ‘admin-lte’? Is admin-lte
constructing it on-load or…?
Ok, you probably got this already covered - but I have to ask - is it running a compatible version of jQuery?
The AdminLTE repository cites jQuery 1.11+ - the current version is at 3.2.1 and a lot of the 1.x shenanigans have be deprecated (npm should get the right version, but where is that jQuery exactly coming from and which version is it actually).
(I hit the jackpot once, so it’s unlikely to happen again.)
So, I got past the the JQuery problem, buy using the jquery that is included in admin-lte. Then hit the next problem with on of the bootstrap packages that was looking for jquery
(no caps), so a window.jquery = JQuery
fixed that. However, I got stuck on another package that I’m not able to resolve.
import "phoenix_html"
// import JQuery from'jquery'
// var $ = JQuery
// import JQuery from 'admin-lte/plugins/jQuery/jquery-2.2.3.min.js'
// import BootStrap from 'admin-lte/bootstrap/js/bootstrap.min.js'
// require('admin-lte/plugins/jQuery/jquery-2.2.3.min.js')
require('jquery')
console.log("jquery", $('head'), JQuery.fn)
window.jQuery = JQuery
window.jquery = JQuery
// require('admin-lte/bootstrap/js/bootstrap.min.js')
require('admin-lte/bootstrap/js/bootstrap.min.js')
require('admin-lte/plugins/datatables/jquery.dataTables.js')
// window.datatables = datatables
require('admin-lte/plugins/datatables/dataTables.bootstrap.js')
// require('admin-lte/dist/js/app.min.js')
// require('admin-lte/dist/js/demo.js')
gives me the error
jquery [head, prevObject: n.fn.init(1), context: document, selector: "head"] [jquery: "2.2.3", selector: "", constructor: function, toArray: function, get: function…]
countries:3 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (countries:3)
at i (jquery-2.2.3.min.js:6)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:6)
at Function.ready (jquery-2.2.3.min.js:6)
at HTMLDocument.J (jquery-2.2.3.min.js:6)
I’m ready to give up. I’m going to pull the files into my static/vendor folder, specify each individual file in my brunch file and put each individual file into the head of my layout template.
Using npm to pull in packages is a nice idea, but I constantly waist hours trying to get brunch to configured. This is absolutely ridiculous. I almost ready to give up on brunch and learn another solution like webpack.
Just a shot in the dark here - the adminLTE example uses “good ol’” script tags - you are using require
- could that interfere with the plugin being able to patch itself into jQuery? (In my experience often jQuery and “modern JavaScript” don’t work all that seamlessly - which is why for the time being I avoid jQuery and anything that depends on it).
Background: How to use RequireJs with jQuery
PS: You may need to add the plugin in brunch-config.ls
under npm.static
.
brunch-config npm
@perreynders Do you know of a good free admin template that that does not use jQuery? I would love to ditch jQuery, but I have not found anything to give lots of admin UI features. There is a port of admin-lte in Vue. Although it looks pretty good, I don’t believe the port is complete.
static
is a good idea. I noticed that the other day, but forgot to try it. I’ll give it a shot.
Can’t endorse anything but I came across this today: Vue admin - most templates use bootstrap 3 (modern incarnation of jQuery-syndrome?) but this uses Bulma which I haven’t come across before.
1 Like
It has potential. Not that polished yet, but like where its going.
I have up on npm module approach. Moved all the files into vendor. Not what I wanted, but it works for how.
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: {
"js/app.js": /^(web\/static\/js)|(node_modules)/,
'js/jquery-2.2.3.min.js': 'web/static/vendor/admin-lte/plugins/jQuery/jquery-2.2.3.min.js',
'js/bootstrap.min.js': 'web/static/vendor/admin-lte/bootstrap/js/bootstrap.min.js',
'js/jquery.dataTables.js': 'web/static/vendor/admin-lte/plugins/datatables/jquery.dataTables.js',
'js/dataTables.bootstrap.js': 'web/static/vendor/admin-lte/plugins/datatables/dataTables.bootstrap.js',
'js/app.min.js': 'web/static/vendor/admin-lte/dist/js/app.min.js'
},
order: {
}
},
stylesheets: {
joinTo: {
"css/app.css": [
"web/static/vendor/admin-lte/bootstrap/css/bootstrap.min.css",
"web/static/vendor/admin-lte/plugins/datatables/dataTables.bootstrap.css",
"web/static/vendor/admin-lte/dist/css/AdminLTE.min.css",
"web/static/vendor/admin-lte/dist/css/skins/_all-skins.min.css",
]
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true,
whitelist: ['jquery'],
globals: {
}
}
};