20

Using Magento 2.3.3 seeing the below notice in our browser console.

Fallback to JQueryUI Compat activated. Your store is missing a dependency for a jQueryUI widget. Identifying and addressing the dependency will drastically improve the performance of your site. Compat.js

Could anyone provide any guidance on where to start to debugging this issue

Thanks

3
  • 3
    Yeah the jquery/ui is not recommended in 2.3.x and has been split into modules to improve javascript performance. I would just get grep for jquery/ui in app folder and see what files are using it and start swapping out for modules. The original source files should show you what the modules that can be used instead are and just replicate. – harri Oct 25 '19 at 15:34
  • i just installed a clean 2.3.3 and i found oodles of 'jquery/ui' grepping through the code base – iphigenie Oct 27 '19 at 18:46
  • I can see define([ ....... 'jquery/ui', ...... ] most of the module in 2.3.4 what do i do ? – jibin george Mar 11 '20 at 10:39
12

I am facing the same issue currently and working on it, but it is highly specific per site and the issue might be connected with your theme, extensions and custom code.

The issue is caused by certain JS or PHTML files calling jquery/ui as a dependency like this:

define([
    ...
    'jquery/ui'
    ...
],

So to deal with the issue, you need to do a text search for jquery/ui on all files located in app/code and app/design/frontend/{vendor}/{theme}/.

You need to figure out which module of jquery/ui is needed in each particular instance you find.

Here is a list of all jQuery UI modules (you can see them when you open compat.js in the console warning message)

'jquery-ui-modules/core',
'jquery-ui-modules/accordion',
'jquery-ui-modules/autocomplete',
'jquery-ui-modules/button',
'jquery-ui-modules/datepicker',
'jquery-ui-modules/dialog',
'jquery-ui-modules/draggable',
'jquery-ui-modules/droppable',
'jquery-ui-modules/effect-blind',
'jquery-ui-modules/effect-bounce',
'jquery-ui-modules/effect-clip',
'jquery-ui-modules/effect-drop',
'jquery-ui-modules/effect-explode',
'jquery-ui-modules/effect-fade',
'jquery-ui-modules/effect-fold',
'jquery-ui-modules/effect-highlight',
'jquery-ui-modules/effect-scale',
'jquery-ui-modules/effect-pulsate',
'jquery-ui-modules/effect-shake',
'jquery-ui-modules/effect-slide',
'jquery-ui-modules/effect-transfer',
'jquery-ui-modules/effect',
'jquery-ui-modules/menu',
'jquery-ui-modules/mouse',
'jquery-ui-modules/position',
'jquery-ui-modules/progressbar',
'jquery-ui-modules/resizable',
'jquery-ui-modules/selectable',
'jquery-ui-modules/slider',
'jquery-ui-modules/sortable',
'jquery-ui-modules/spinner',
'jquery-ui-modules/tabs',
'jquery-ui-modules/timepicker',
'jquery-ui-modules/tooltip',
'jquery-ui-modules/widget'

Magento is basically loading all jQuery UI modules because it can't identify which one(s) the custom code needs.

This slows down the site and you should definitely fix it.

To fix it, you need to:

  1. Locate which files are calling jquery/ui

  2. If this is a customization of original Magento functionality, you can probably check the original Magento vendor files and compare which jQuery UI module you need --> then you just change the jquery/ui dependency with the exact module that is needed.

  3. For extensions, this might be difficult because you need to figure out which module of jQuery UI the extension is using. The easiest fix would be to update the extension.

5
  • it seems all over the core code. Mostly across the admin code base but also in magento/module-theme/view/frontend/requirejs-config.js and the dotmailer and amazon "imposed" modules And the Stripe integration too :( – iphigenie Oct 27 '19 at 18:44
  • @iphigenie can't say for sure, but most probably not all core modules were adjusted to this recent change, but will change in a future version of Magento. It's also possible that the admin area still uses jquery/ui as a non-modular dependency. – Lez Oct 27 '19 at 22:15
  • Which plugins from these should be used to achieve smartheader, stickyheader and expandingsearch functionalities? Any help would be highly appreciated. – Zoya Dec 12 '19 at 18:50
  • 1
    @Zoya although I can imagine what these functionalities do, it's impossible for me to know exactly how your theme used jquery/ui for them without seeing the code. I can suggest this though: since (from my experience) theme developers usually have unnecessary or poorly written code I would suggest to first try and remove jquery/ui and check if everything is working. If you get JS errors, try adding the core and/or widget modules. – Lez Dec 12 '19 at 19:33
  • @Lez I am using Ultimo theme and the developer has abandoned updating after magento 2.3.1. – Zoya Dec 14 '19 at 9:44
1

The answer from Lez is absolutely correct. But there is a much easier way to locate the extension which is causing it by using google chrome.

Just open the developer tools, and you will see something like this:

enter image description here

You have to extend it and debug the stack trace:

enter image description here

it will lead you to the initial call, which might hint the module, in my case Amasty_HidePrice

enter image description here

then contact the company which developed the module and tell them to fix it or fix it yourself in an override.

5
  • I am not getting this option i can't find out what causing the issue as in which module – jibin george Mar 11 '20 at 10:29
  • Try it again with chrome – Black Mar 11 '20 at 10:51
  • i did on chrome but not able to get the way you have – jibin george Mar 12 '20 at 10:33
  • @jibingeorge, which version of chrome? Maybe you need to update. Otherwise your error might be different than mine. – Black Mar 12 '20 at 11:21
  • Google Chrome is up to date Version 80.0.3987.132 (Official Build) (64-bit) this is mine – jibin george Mar 13 '20 at 9:37
0

I also can to confirm that Amasty company likes to produce deprecated features like a discussed one: http://screenshots.collabstar.com/vza/Selection_2e19d30.png That's an interesting fact they mark the issue as "jquery/ui" //can't be removed . I communcate with them on a fix. Another candidate module is Ebizmarts Mailchimp with a script "campaigncatcher.js"

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.