magento 2.3.4 cannot call methods on tabs prior to initialization; attempted to call method 'activate'

Question

In Magento 2.3.4 product page when click review text or reviews and not going to review form or Customer review

Before it's working fine in Magento 2.2.4

and it's an error coming from the below core file in this function

/vendor/magento/module-review/view/frontend/web/js/process-reviews.js

$(function () {
    $('.product-info-main .reviews-actions a').click(function (event) {
        var anchor, addReviewBlock;

        event.preventDefault();
        anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
        addReviewBlock = $('#' + anchor);

        if (addReviewBlock.length) {
            $('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
                if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                    $('.product.data.items').tabs('activate', index);
                }
            });
            $('html, body').animate({
                scrollTop: addReviewBlock.offset().top - 50
            }, 300);
        }

    });
});

I checked but I can't find proper solution
Does anyone know about this issue?

Any help would be appreciated.

Thanks.

Answer 1

Try this one. The issue may be resolved by putting the below code into the details.phtml of Magento_Catalog module.

<script type="text/javascript">
    require(['jquery','jquery/ui'], function($) {
    //Change the below class if not matching
        $("div.product.data.items").tabs();
    });
</script>

Vendor Path - <magento-root>/vendor/magento/module-catalog/view/frontend/templates/product/view/details.phtml

For theme - <magento-root>/app/design/frontend/Vendor/ThemeName/Magento_Catalog/templates/ product/view/details.phtml

Note: Copy details.phtml file from vendor path if not present in the respective theme directory.

Clear the cache if prompted.

This is purely workaround and worked for me very well in 2.3.4 instance.

Answer 2

In Magento 2.3.3, Magento split the jquery/ui module into smaller parts. See https://github.com/magento/magento2/issues/22995. Code should not depend on the big jquery/ui module anymore, but on specific modules like jquery-ui-modules/modulename. This improves the performance.

However, many older extensions or older custom code still depends on the big jquery/ui module. If there is such a dependency, the file lib/web/jquery/compat.js is included, which loads all jQuery UI modules. It also explicitly loads the module jquery-ui-modules/tabs. Normally, Magento uses its own tab implementation mage/tabs and does not use jquery-ui-modules/tabs. However, if jquery-ui-modules/tabs is loaded after mage/tabs you will get the error you mentioned. To reproduce this, you can open a product page on a demo shop, open the console and execute require(['jquery/ui'], function(){}). When you do this and you click the review link, you will get the mentioned error.

So most probably, one of your themes / extensions / custom code also requires jquery/ui, which leads to the error. To fix this and to improve the performance of your page, you should get rid of that dependency.

If you cannot get rid of the dependency right away, because it e.g. comes from a third party module, another workaround is to map the jquery-ui-modules/tabs module to the mage/tabs module in your requirejs-config.js:

var config = {
    map: {
        "*": {
            // if someone depends on jquery/ui, jquery/compat is loaded
            // jquery/compat loads jquery-ui-modules/tabs
            // if jquery-ui-modules/tabs is loaded after mage/tabs, the tabs function is mapped to the wrong widget
            // (to the jquery widget and not to the Magento widget)
            // then, it is not possible to call methods on the tabs
            // this mapping fixes this issue, because jquery-ui-modules/tabs is not loaded any more
            "jquery-ui-modules/tabs": "mage/tabs"
        }
    }
};

Answer 3

Try This

    $(function () {
        $('.product-info-main .reviews-actions a').click(function (event) {
            var anchor, addReviewBlock;

            event.preventDefault();
            anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
            addReviewBlock = $('.block.review-add .block-content #' + anchor);

            if (addReviewBlock.length) {
                $('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
                    if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                        $('.product.data.items').tabs('activate', index);
                    }
                });
                $('html, body').animate({
                    scrollTop: addReviewBlock.offset().top - 50
                }, 300);
            }

        });
    });