JS error in dev and prod

[fmarcoux96]

Every page I go gives this error:

Uncaught TypeError: Cannot set property 'isAnimating' of null
    at new Collapse (bootstrap-native-v4.js:860)
    at initializeDataAPI (bootstrap-native-v4.js:1928)
    at BSN.initCallback (bootstrap-native-v4.js:1934)
    at Object.<anonymous> (bootstrap-native-v4.js:1939)
    at bootstrap-native-v4.js:5
    at Object.<anonymous> (bootstrap-native-v4.js:24)
    at Object../node_modules/bootstrap.native/dist/bootstrap-native-v4.js (bootstrap-native-v4.js:1954)
    at __webpack_require__ (bootstrap:19)
    at Object../themes/BootstrapTheme/assets/js/index.js (index.js:14)
    at __webpack_require__ (bootstrap:19)

I tried including jQuery (since it wasn't there) but it didn't change anything. Nothing in the JS works (no tabs, no cart, etc.).

[j0r1s]

Hello,

I've arrived here since I've been encountering the same error.

@fmarcoux96, Sylius/BootstrapTheme uses `bootstrap-native-v4.js', it's a bootstrap version that doesn't use jQuery.

Concerning the issue, the error is thrown when bootstrap tries to initialize a Collapse widget on a non-existing element.

For me it was caused by this line in SyliusShopBundle/views/_header.html.twig :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar">

But no element with id mainNavbar are present in my layout, the element is located in SyliusShopBundle/views/Taxon/_horizontalMenu.html.twig but this template part doesn't seem to be included anywhere.

The issue should probably be corrected by the boostrap-native team because the init should not failed this way if an element is missing.

As a workaround, I've been commenting the column containing the button in SyliusShopBundle/views/_header.html.twig and I get no more errors.

Let me know if I can be of any help,

[misaon]

@kulczy close?

[9946604]

Same here. Happens when there is no _horizontalMenu.html.twig being rendered

[kulczy]

It seems it's just like @j0r1s wrote, the error is due to the fact that bootstrap.native does not check whether the item exists. So if you delete or change the horizontal menu, you should also remember about the button.

[toofff]

Why not just change the HTML?

In SyliusShopBundle/views/layout.html.twig template replace

{% include '@SyliusShop/_header.html.twig' %}

by

{{ render(url('sylius_shop_partial_taxon_index_by_code', {'code': 'category', 'template': '@SyliusShop/_header.html.twig'})) }}

In SyliusShopBundle/views/_header.html.twig template replace

<div class="col-auto d-lg-none ml-2">

by

<div class="{{ 'col-auto ml-2 ' ~ ((taxons|length > 0) ? 'd-lg-none' : 'd-md-none') }}">

In SyliusShopBundle/views/Taxon/_horizontalMenu.html.twig template replace

{% if taxons|length > 0 %}
    <nav class="navbar navbar-expand-lg">
        <div class="collapse navbar-collapse justify-content-center" id="mainNavbar">
            <div class="navbar-nav py-1">
                {% for taxon in taxons %}
                    {{ macros.item(taxon) }}
                {% endfor %}
            </div>
            <div class="d-md-none py-3 border-top">
                {{ sonata_block_render_event('sylius.shop.layout.before_security_widget') }}

                {{ render(controller('sylius.controller.shop.security_widget:renderAction')) }}

                {{ sonata_block_render_event('sylius.shop.layout.after_security_widget') }}
            </div>
        </div>
    </nav>
{% endif %}

by

<nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse justify-content-center" id="mainNavbar">
        {% if taxons|length > 0 %}
            <div class="navbar-nav py-1">
                {% for taxon in taxons %}
                    {{ macros.item(taxon) }}
                {% endfor %}
            </div>
        {% endif %}
        <div class="d-md-none py-3 border-top">
            {{ sonata_block_render_event('sylius.shop.layout.before_security_widget') }}

            {{ render(controller('sylius.controller.shop.security_widget:renderAction')) }}

            {{ sonata_block_render_event('sylius.shop.layout.after_security_widget') }}
        </div>
    </div>
</nav>

It adds a call to a controller for the header which is always displayed to juggle with the display of the connection menu and account creation.

Otherwise we could replace the menu titles with pictograms so as not to have to put them in the mobile menu and delete condition in the SyliusShopBundle/views/_header.html.twig template.

[oallain]

Hello,

This issue seems to be outdated. If it isn't, feel free to reopen it.