Problem/Motivation

When two BigPipe placeholders attach libraries that depend on each other, the dependent script can run before the library it depends on. jQuery UI Autocomplete then fails with Uncaught TypeError: e.widget is not a function. processReplacement() in big_pipe.js starts a separate command queue per replacement. BigPipe sends a library only with the first replacement that needs it. While that replacement waits for its CSS, a later replacement adds its scripts first. #2927687: Libraries with dependencies may cause race conditions with #lazy_builders reported this symptom and was closed as a duplicate of #1988968: Drupal.ajax does not guarantee that "add new JS file to page" commands have finished before calling said JS, which orders the commands within one response but not across replacements. #3620565: BigPipe unbinds #ajax behaviors and can wipe drupalSettings.ajax changes the command order within one replacement. The meta issue #3537357: [Meta] Big Pipe related issues, causing seemingly random failures tracks BigPipe scripts that load in the wrong order.

Steps to reproduce

  1. Drupal core main at 8a2a12ddbe, PHP 8.5.12, MySQL 8.0, Chromium 156 with chromedriver in W3C mode.
  2. Apply only the test commit of the merge request and run BigPipeRegressionTest::testReplacementOrder(). Its page has a placeholder with a stylesheet that loads after one second, followed by a placeholder whose library depends on the library of the first.
  3. The test fails. window.bigPipeRegressionTestDependencyLoaded is false, so dependent.js ran before slow-dependency.js. With the fix it passes. Without the fix the same test also fails on 11.x at 5910ba0a74 (PHP 8.3.36) and on 10.6.x at d557f3cfe7.

Proposed resolution

This MR runs the replacements one after the other on one promise chain, so each starts after the previous one has added its CSS and JavaScript. A failed replacement is logged and does not stop the next one. A slow stylesheet now also delays the replacements after it, like a render-blocking stylesheet on a page without BigPipe.

Remaining tasks

Backport to 10.6.x after the fix is in main. BigPipe there still uses Drupal.Ajax, so the change needs its own merge request.

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3637646

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

hansrossel created an issue.