Fix not loading CKEditor 5 and Tour with BigPipe enabled after Drupal 10.4 update

Facing the same issue

Are any CKEditor plugin modules installed on affected sites?

When I disable the BigPipe module, the issue disappears.

I can't reproduce this with the standard profile (ckeditor5 and big_pipe installed).

Can you try the following:

1. See if you can reproduce it on a clean install of Drupal 10.4 with only core.

2. As @cilefen says check if you have any ckeditor plugin modules installed and if so let us know which ones.

The most likely cause of this is #3467860: Ensure consistent ordering when calculating library asset order interacting badly with a (usually incorrect) contrib library definition. So a third step would be checking contrib library definitions to see if they specify weight for any files.

#3294720: The attachBehaviors() for document is only called after Big Pipe chunks are processed
#3467860: Ensure consistent ordering when calculating library asset order

Big Pipe is attempting to attach behaviors too early, and it’s affecting the Tour module as well.

  // Attach behaviors early, if possible.
  Drupal.attachBehaviors(document);

Having a look at the logic in drupal.init.js file

// Allow other JavaScript libraries to use $.
if (window.jQuery) {
  jQuery.noConflict();
}

// Class indicating that JS is enabled; used for styling purpose.
document.documentElement.className += ' js';

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it in an anonymous closure.
(function (Drupal, drupalSettings) {
  /**
   * Calls callback when document ready.
   *
   * @param {function} callback
   *   The function to be called on document ready.
   */
  const domReady = (callback) => {
    const listener = () => {
      callback();
      document.removeEventListener('DOMContentLoaded', listener);
    };
    if (document.readyState !== 'loading') {
      setTimeout(callback, 0);
    } else {
      document.addEventListener('DOMContentLoaded', listener);
    }
  };

  // Attach all behaviors.
  domReady(() => {
    Drupal.attachBehaviors(document, drupalSettings);
  });
})(Drupal, window.drupalSettings);

Defines a behavior to be run during attach and detach phases.
Attaches all registered behaviors to a page element.
in the drupal.js file

  Drupal.attachBehaviors = function (context, settings) {
    context = context || document;
    settings = settings || drupalSettings;
    const behaviors = Drupal.behaviors;
    // Execute all of them.
    Object.keys(behaviors || {}).forEach((i) => {
      if (typeof behaviors[i].attach === 'function') {
        // Don't stop the execution of behaviors in case of an error.
        try {
          behaviors[i].attach(context, settings);
        } catch (e) {
          Drupal.throwError(e);
        }
      }
    });
  };

Given that a Drupal 10 site was installed with the minimal profile ( not the standard profile )
And later on the BigPipe and CKEditor5, Tour modules were installed
Then the wight of the BigPipe JavaScript library will affect the CKEditor 5, Tour, Maybe other modules.

Attached a static drupal-core--2024-12-31--3496329--mr-10753.patch file for the 10.4.x to this point from MR10753.
To be used with the Composer Patches

Possible to get a test case showing the issue.

Faced another issue when adding header: true to the drupal/big_pipe library.
The status message no longer appears on the site.

Switched to use a custom domReady in the BigPipe script to let work as Drupal init to Attach behaviors early, if possible without errors

-

Ops, uploaded the wrong static file name.

Attached a static drupal-core--2025-01-02--3496329-32--mr-10753.patch file for the 10.4.x to this point from MR10753.
To be used with Composer Patches

It helped me with the problem
https://www.drupal.org/project/collapsible_dnd/issues/3497645

Drupal 10.4.1. Patch #33 work for me

Patch #33 works perfectly on core 10.4.5, is there still a reason to to keep Needs work status?

header: true means that big pipe will load a large amount of render blocking javascript, is that absolutely necessary to the fix here?

Ideally would come with test coverage but it might not be possible to reproduce consistently in a test?

I experienced this issue when using ACE Code Editor along with CKEditor5 on Drupal 11.2.2, and MR !10754 fixes it.

Thank you @Rajab for the MR.

Infact in my opinion I agree with @catch to not use the "header: true" as that will use a huge amount of render for javascript. This way we are just forcing the script to load in the header just to satisfy(May be a temp solution).

FYI, the "collapsible_dnd" module is also impacted and it is not rendering the "draggable collapser" correctly.
https://www.drupal.org/project/collapsible_dnd/issues/3497645 -> The above patch from @Rajab for D10.4.x fixes the issue but creates additional errors in big_pipe.js in console and also stops showing the drupal msgs (I will try to some screenshots here).

I am working to find some solution and will update in both the places.

Changes always go into the development branch first.

Have also experienced this where Big Pipe is affecting the loading of libraries in Claro: #3506870: Tabledrag misalignment and "Show row weights" link

Thanks patch #33 works for drupal 10.6.7 too :)