[PP-1] Make Media Library widget work when JS aggregation is enabled

Thanks, @akhil babu! 😄

Couldn't figure out why the widget is not working with js aggregation enabled :( Maybe something to do with the order in which the js is executed?

So I think I understand why this is happening, but I'm not yet sure how to solve it yet:

In experience_builder/ui/src/services/processResponseAssets.ts we have:

    try {
      await Drupal.AjaxCommands.prototype['add_js'](
        {
          instanceIndex: Drupal.ajax.instances.length + 1,
          selector: 'head',
        },
        {
          command: 'add_js',
          status: 'success',
          data: js.filter(
            (item: JsAttachItem) =>
              item.src && !document.querySelector(`script[src="${item.src}"]`),
          ),
        },
      );
    } catch (e) {
      console.error(e);
    }
  }

The following line:

item.src && !document.querySelector(`script[src="${item.src}"]`),

makes sure we don't add a JavaScript file that's already been added. The problem is that when we have aggregation enabled the file name is random and will contain multiple libraries/files.

So what's happening here is that multiple JS files already loaded will be loaded again, and e.g core/misc/ajax.js gets loaded twice, and I can see that it doesn't get the commands registered correctly (openDialog, closeDialog) from e.g dialog.ajax.

omkar-pd → closed merge request !276

If aggregation is on in console I see

processResponseAssets.ts:45 TypeError: Cannot read properties of undefined (reading 'prototype')
    at processResponseAssets (processResponseAssets.ts:36:33)
    at executeEndpoint (chunk-ROQIBUHR.js?v=6a6fe84e:757:37)
    at async chunk-4IJSOCZX.js?v=6a6fe84e:2594:27
    at async Promise.all (index 1)

upon logging Drupal we get- the ajax,AjaxCommands is not getting attached.

Turns out ajax, AjaxCommands are not getting attached because of this error

Uncaught 
TypeError: Cannot read properties of null (reading 'classList')
    at getRootMargin (js_rMknyV8zDbWnzkCOj…Lc0EAHp4CYM:28:1903)
    at monitorNavPosition (js_rMknyV8zDbWnzkCOj…Lc0EAHp4CYM:28:2247)
    at js_rMknyV8zDbWnzkCOj…Lc0EAHp4CYM:28:3024
    at js_rMknyV8zDbWnzkCOj…Lc0EAHp4CYM:28:3147

this error comes from core/themes/olivero/js/navigation-utils.js. I solved this error manually and media library widget works with aggregation on.

Moving this to needs review just to check If others getting same error in console.

I am also encountering the same issue when JavaScript aggregation is enabled.

I tested MR 277 and the media library widget works fine with JS aggregation enabled

@akhil babu,

Check the screenshot in IS, the media library widget should look like it.

Please test again with a fresh install.
1. Install Drupal
2. Enable Media, Media Library, XB, Xb Vite Integration modules,
3. Add article and go xb/node/1
4. Click on the image component & check the console for errors.
5. If you click on Add Media it does not work.

Unassigning myself. I will check this once this issue 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Fixed is fixed.
https://www.drupal.org/project/experience_builder/issues/3472900#comment... 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Fixed

I was going to say this too, I'm ~90% confident that 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Fixed will fix this. See my detailed analysis at #3472900-13: XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading → for why.

(I haven't read this issue in detail, otherwise it'd probably be 99%.)

🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Fixed is in. Let's verify that this no longer can be reproduced 🙏

I believe 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Fixed fully addresses this and has the e2e test as proof, but we should at least use this issue to remove the LOC in experience_builder_field_widget_complete_form_alter that are there only to report that the widget does not work with aggregation

if (isset($context['form']['#parents']) && array_search('xb_component_props', $context["form"]["#parents"]) !== FALSE) {
    RenderArrayXB::markXB($field_widget_complete_form);
    if ($context['widget']->getPluginId() === 'media_library_widget') {
      $config = \Drupal::service('config.factory')->getEditable('system.performance');
      $js_preprocess = $config->get('js.preprocess');
      if (!empty($js_preprocess)) {
        $field_widget_complete_form['#suffix'] = 'Warning: This site has JS aggregation enabled. The media library widget will not work unless it is disabled. This will, of course, be addressed soon.';
      }
    }
  }

#24 — whew, great call! 😅

Fixing tag

Automatically closed - issue fixed for 2 weeks with no activity.