Laravel mix and jQuery plugin issue, $().plugin not a function

Question

I use Laravel mix to manage my js files, here is my app.js :

window.$ = window.jQuery = require('./jquery-1.11.2.min.js');

require('./jquery.easing.1.3.js');
require('./bootstrap.min.js');
require('./SmoothScroll.js');
require('./jquery.scrollTo.min.js');
require('./jquery.localScroll.min.js');
require('./jquery.viewport.mini.js');
require('./jquery.countTo.js');
require('./jquery.appear.js');
require('./jquery.sticky.js');
require('./jquery.parallax-1.1.3.js');
require('./jquery.fitvids.js');
require('./owl.carousel.min.js');
require('./isotope.pkgd.min.js');
require('./imagesloaded.pkgd.min.js');
require('./jquery.magnific-popup.min.js');
require('./gmap3.min.js');
require('./wow.min.js');
require('./masonry.pkgd.min.js');
require('./jquery.simple-text-rotator.min.js');
require('./all.js');

the all.js contains all the logic and inits , so my problem is that some jQuery plugins don't work :

Uncaught TypeError: $(...).magnificPopup is not a function at init_lightbox (index.js?id=f95f3419a2325063a526:11289)

when I load my js in the traditional way <script ... in the same order as above all works but when I require them it throws the error, please help, thank You

EDIT:

The init functions fire after the ducument is ready (in all.js) :

$(document).ready(function(){

        $(window).trigger("resize");            
        init_classic_menu();
        init_fullscreen_menu();
        init_side_panel();
        init_lightbox();
        init_parallax();
        init_shortcodes();
        init_tooltips();
        init_counters();
        init_team();
        initPageSliders();
        init_map();
        init_wow();
        init_masonry();
});

Mikail G. · Accepted Answer · 2018-02-04 21:20:25Z

3

So the solution was to install the jQuery via npm and instead of

window.$ = window.jQuery = require('./jquery-1.11.2.min.js');

do

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

that has solved the problem!

answered Feb 4, 2018 at 21:20

Mikail G.

4787 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal · Accepted Answer · 2018-02-04 20:46:06Z

0

It looks like there is a problem with Magnific-Popup

It's because Modernizr adds video CSS class to HTML element, which is the same as selector of your popup.

Do you happen to use class video anywhere on your website? Maybe Magnific-Popup is accidentally targeting your HTML element.

edited Feb 4, 2018 at 20:46

answered Feb 4, 2018 at 20:32

Michal

5,2738 gold badges35 silver badges67 bronze badges

5 Comments

Mikail G. Over a year ago

hi, thank You , unfortunately this is not the case, the functions are fired after the document ready event , I have updated the question and included the snippet

Michal Over a year ago

Cool, I just edited my answer. It kind of makes sense because we would see something like $ is not defined if jQuery was not initialized correctly.

Mikail G. Over a year ago

nope, not a single "video" class, the issue must be form the webpack , coz if I load the scripts on the page in a traditional way using <script> tags it all works

Michal Over a year ago

Maybe turn off js minification?

Mikail G. Over a year ago

it is in dev mode so it is not minifying

Collectives™ on Stack Overflow

Laravel mix and jQuery plugin issue, $().plugin not a function

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related