'item doesn't belong to list' error with paged.js on Drupal sites when CSS/JS aggregation is enabled

Created on 28 October 2024, 3 months ago

Problem/Motivation

Paged.js encounters an intermittent issue on Drupal sites when CSS and JS aggregation is enabled. Switching to the Gin theme, for example, can trigger the error under certain configurations. In these cases, enabling aggregation causes the page using paged.js to fail, with the following error in the console:

Uncaught (in promise) Error: item doesn't belong to list
    at Ee.remove (paged.polyfill.min.js:4:39947)
    at Tu.constructor.onRule (paged.polyfill.min.js:4:475590)
    at paged.polyfill.min.js:4:4186
    at Array.forEach (<anonymous>)
    at B.trigger (paged.polyfill.min.js:4:4157)
    at Object.enter (paged.polyfill.min.js:4:407411)
    ...

This error seems challenging to reproduce consistently across different Drupal installations, as some setups work fine while others encounter this issue. Due to this inconsistency, the only realistic solution is disabling preprocessing for paged.js to prevent the error. Performance-wise, this will have minimal/none impact as paged.js is only used on /pdf pages, viewed by editors only or the actual pdf generation service.

Proposed resolution

To avoid conflicts introduced by Drupal’s aggregation and minification processes, modify the libraries.yml configuration for paged.js to set preprocess: false. This adjustment instructs Drupal to load paged.js without preprocessing, reducing the likelihood of compatibility issues.

Remaining tasks

Update the library definition in .libraries.yml.

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom andreastkdf

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024