Hi, I have been struggling with this for a while now but thought I should try out a fresh copy of Sage to get to the bottom of it.
I have set up a fresh install of Sage 9b3, and have Elementor + Elementor Pro installed. I create a new carousel gallery / slider widget (which they use slick.js for) with Elementor and publish it. Everything works great inside the Elementor editor, but on the published page, the slider doesn’t load and the console says:
The carousel works flawlessly when Wordpress’ 2016 theme is activated, so I don’t think it’s something to do with the plugin, or WP itself. I’ve also tried this out on other Sage 9 + Elementor sites I have, and the same problem happens.
I have lodged an issue on their Github site too but it doesn’t seem to get very far. My gut feeling is that Jquery is being called twice somewhere, and that’s causing the function to fail.
How does Sage 9 initialise Jquery? What part of the code would I need to disable to test this idea out? Is it possible to run two versions at once in some kind of no-conflict mode I wonder?
Any thoughts / insights would be greatly appreciated.
AFAIK Sage doesn’t do anything w/ jQuery by itself. It enqueues main.js as a “dependency” of jQuery, but I think that’s the only time it touches anything jQuery related.
If you have Soil installed, and left add_theme_support('soil-jquery-cdn') in app/setup.php then Soil does futz with jQuery loading a bit, which could be causing your problem (I ended up pulling it out on a recent project because it kept loading jQuery twice).
Usually when I run into these kinds of problems, I look at the Network tab of the Inspector to see if any files aren’t getting loaded. I’ll also just scan the <head> and footer in the HTML to see what order JS files are being loaded in – 80-90% of the time these errors for me are because something wasn’t loaded in the right order, or something has defer or async on it, which is causing it to load out of the expected order.
Unfortunately, I’m completely unfamiliar w/ Elementor, so I’m at a bit of a loss there. 
It looks like slick hasn’t been initialized on your element when frontend.min.js tries to do something with it. If slick.js is being loaded as a separate file, perhaps it’s not being loaded correctly/in the right order?
1 Like
Could this issue be related to the open issue on GitHub about plugins not enqueing scripts properly?
This issue boils down to poor plugin code practices, but since Sage is the only theme with the problem (due, I think, to the way it processes templates), it’s probably Sage’s issue to fix.
Thanks everyone, some good tips and pointers here. I will keep rummaging around to see what the problem could be and report back. I have also noted that v1.6 of Elementor + Sage 9 also has problems with the image lightbox carousel widget (which uses swiper.js).
