Adminlte: Uncaught TypeError: $(...).tree is not a function Using Webpack

[Hujjat]

Hi.

I and using AdminLTE with Laravel. ( I don't wanna use any package or AdminLTE-laravel like projects. )
So, I am using Webpack to mix all my js and CSS files in one file.

I have installed AdminLTE with npm and everything works just fine. Except I see an error in console and the sidebar toggle is not working as well.

I don't know what's wrong. I have jQuery and Bootstrap added before adminLTE.

Thank's :)

[almasaeed2010]

Hello,

Could you provide the version number of AdminLTE and you laravel mix file?

Thanks!

[Hujjat]

Hi.
I am using the latest version AdminLTE v2.3.8. I installed it using npm install AdminLTE --save-dev

Here is my webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

my asset/js/bootstrap.js file.

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
    // require('jqtree');
} catch (e) {}

// AdminLTE
require('admin-lte');

Thank's for your great project :)

[almasaeed2010]

Hmmmm. This is a bit odd. Could you try including adminlte's app.js directly in your html view instead?

[almasaeed2010]

If that works, we'll need to figure out how to make the require work with adminlte.

[Hujjat]

Hi.
I did the following.
The problem with error in console is solved ( I did a typo mistake somewhere else )

But the sidebar is not collapsing.

I removed the adminLTE require from bootstrap.js and included the admilte app.js directly in the template. But still, The sidebar does not collapse on click.

It doesn't give any error as well.

I fixed the sidebar problem with my custom code.

$('.sidebar-toggle').on('click',function(){

           var cls =  $('body').hasClass('sidebar-collapse');
           if(cls == true){
                $('body').removeClass('sidebar-collapse');
           } else {
                $('body').addClass('sidebar-collapse');
           }

    });

Now it's working just fine. I was assuming it to work without this code as the demo work.

Thank's :)

[vankasaisumanth]

I got similar error recently and found the bug creating this error. It is, if at all you are using the same library twice or similar libraries(which serve same purpose) from different sources, then this error comes. If you remove one of similar libraries then your code works fine.

This might be one of the reason and solution.

[brianmazzocchi]

Hi.
I did the following.
The problem with error in console is solved ( I did a typo mistake somewhere else )

But the sidebar is not collapsing.

I removed the adminLTE require from bootstrap.js and included the admilte app.js directly in the template. But still, The sidebar does not collapse on click.

It doesn't give any error as well.

I fixed the sidebar problem with my custom code.

$('.sidebar-toggle').on('click',function(){

           var cls =  $('body').hasClass('sidebar-collapse');
           if(cls == true){
                $('body').removeClass('sidebar-collapse');
           } else {
                $('body').addClass('sidebar-collapse');
           }

    });

Now it's working just fine. I was assuming it to work without this code as the demo work.

Thank's :)

You're the men broooooo, thanks !