magento 2.3.4 cannot call methods on tabs prior to initialization; attempted to call method 'activate'
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.
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"
}
}
};