Problem/Motivation

I have 2 sites that both use the Timelines JS view, implemented in very similar ways as the site's frontend designs follow similar motifs. When I update either site from Drupal 10.3.10 to 10.4.0, my Timeline Views all break on the site. I've tried updating the Timelines JS version to the 3.3.18 version without success. I've also tried using the CDN of that version, and while the error is slightly different, it is still broken.

The error is in the Inspector Panel - Console. It is:
"Uncaught TypeError: Cannot read properties of undefined (reading 'Timeline')"

Specifically pointing out this function:
(function() {
drupalSettings.TimelineJS.forEach(function(timeline, key) {
if (timeline['processed'] != true)
window.timeline = new TL.Timeline(timeline['embed_id'],timeline['source'],timeline['options']);
timeline['processed'] = true;
});
}
)();

The result is that the block wrapper is output to the page, but it is an empty div.

Steps to reproduce

Use composer to update site to Drupal version 10.4.0 from 10.3.10.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork views_timelinejs-3495715

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:

About issue forks

Comments

haemishm created an issue. See original summary.

dcam’s picture

dcam commented
Version: 4.0.1 » 4.x-dev

I'm able to reproduce the issue. I just happen to have a site with a timeline that hadn't been updated to 10.4.0 yet. I'll work on a fix.

dcam’s picture

dcam commented

It looks like the nature of the problem is pretty simple. On my site the integration JS (what you copied into the summary) is being loaded before TimelineJS library. So it's trying to call a function that hasn't been loaded yet. It's effectively a dependency problem. I'll patch it ASAP.

dcam’s picture

dcam commented

Asset ordering was changed in Core. See the change record at https://www.drupal.org/node/3473558.

dcam’s picture

dcam commented
Related issues: +#3467860: Ensure consistent ordering when calculating library asset order

dcam opened merge request !10

dcam’s picture

dcam commented
Priority: Normal » Critical

@haemishm I created an MR with a change that fixes the issue for me. Are you able to test the change to verify that it corrects the issue for you too?

drupgirl’s picture

drupgirl commented

Ty for the patch it corrects the issue. So nice! Ty.

haemishm’s picture

haemishm commented

I can confirm this fixes my issue. The timeline is displayed correctly with all functionality restored.

  • dcam committed bc414ada on 4.x 
    Issue #3495715 by dcam, haemishm, drupgirl: Update to Drupal 10.4.0...
dcam’s picture

dcam commented
Status: Active » Fixed

Thank you both for testing the change. I granted credit to you for doing that. I'll create a new release shortly.

bessonweb’s picture

bessonweb commented

I don't know if my problem is the same but in a client website, the timeline would not load.

I have update the plugin to the lastest version 4.1.0 but it not fix the bug.

I have changed the line 25 in views_timelinejs.libraries.yml with :
https://cdn.knightlab.com/libs/timeline3/3.8.18/js/timeline.js: {weight: -10, type: external }

It work good now.

It's certainly not the better solution but it do the job.

I hope that can help you to fix this bug.

Thanks!

dcam’s picture

dcam commented

@bessonweb did you rebuild the cache after updating? I forgot that I intended to make an update function to force a cache rebuild.

bessonweb’s picture

bessonweb commented

Yes I have but the bug was not resolved.

dcam’s picture

dcam commented

Ok, thank you for responding again.

Status: Fixed » Closed (fixed)

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