Problem with combine Grav and webpack asset loading #2119

Sogl · 2018-07-27T02:45:41Z

Hello!

In my project I use webpack (laravel-mix wrapper) for build css and js files.
All css I put in <head>section and all js I put before </body> section.

It worked well in different projects but on my last project some of plugins not working properly: Google maps, reCAPTCHA. Errors about jQuery in console (with Debugger enabled all works fine because it uses own jQuery).

I found this issue about my captcha problem: getgrav/grav-plugin-form#238
and rhuk solution getgrav/grav-plugin-form#238 (comment) to put jquery in head and other js in bottom like I did before.

My vendor.js file:

//commented because I load jQuery with Grav assets
//window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('slick-carousel');
require('lightgallery');
require('lg-thumbnail');
window.Noty = require('noty');

Part of my custom.js file:

jQuery(document).ready(function($) {
    jQuery('.touristpoint-banner').slick({
        //params
    });
    $("#lightgallery").lightGallery({
        //params
    });
});

My app.js file:

require('./vendor');
require('./custom');

Part of my head.html.twig:

{% block stylesheets %}
    {% do assets.addCss('theme://dist/css/app.css', 10) %}
{% endblock %}
{{ assets.css() }}

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://dist/js/app.js', {group: 'bottom'}) %}
{% endblock %}
{{ assets.js() }}

Part of my base.html.twig:

<html>
    <head>
        {% block head %}
            {% include 'partials/head.html.twig' %}
        {% endblock %}
    </head>
    <body
        {% block bottom %}
            {{ assets.js('bottom') }}
        {% endblock %}
    </body>
</html>

Maps with Captcha becomes working. But I get an error:

Uncaught TypeError: $(…).slick is not a function

After trying to get rid of it I did this workaround (and disable js require slick-carousel):

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://node_modules/slick-carousel/slick/slick.js', 
{group: 'bottom'}) %}
    {% do assets.addJs('theme://dist/js/app.js', {group: 'bottom'}) %}
{% endblock %}
{{ assets.js() }}

Ok, now slick-slider works fine, but another error with lightGallery js library:

Uncaught TypeError: $(...).lightGallery is not a function

As a workaround I can enable this line back window.$ = window.jQuery = require('jquery');. All works but I have jQuery 2.x and jQuery 3.x in one page.

How to make Grav and webpack assets to work together?

The text was updated successfully, but these errors were encountered:

rhukster added the question label Jul 27, 2018

Sogl mentioned this issue May 7, 2019

Forms timeout with session getgrav/grav-plugin-form#275

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with combine Grav and webpack asset loading #2119

Problem with combine Grav and webpack asset loading #2119

Sogl commented Jul 27, 2018 •

edited

Loading

Problem with combine Grav and webpack asset loading #2119

Problem with combine Grav and webpack asset loading #2119

Comments

Sogl commented Jul 27, 2018 • edited Loading

Sogl commented Jul 27, 2018 •

edited

Loading