Help with brunh-config.js - admin-lte template

smpallen99

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.

12 comments

/phoenix #brunch

0 3472 12

2017-05-17 13:15:03 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

OvermindDL1

Where is this DataTable on $()'s return being defined?

Post #1

kokolegorille

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.

Post #2

smpallen99

@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

Post #3

OvermindDL1

How is it bundled in ‘admin-lte’? Is admin-lte constructing it on-load or…?

Post #4

peerreynders

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.)

Post #5

smpallen99

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.

Post #6

peerreynders

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

Post #7

smpallen99

@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.

Post #8

smpallen99

static is a good idea. I noticed that the other day, but forgot to try it. I’ll give it a shot.

Post #9

peerreynders

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.

Post #10

Load more posts (2 remaining)