Drupal 11 - jQuery 4.0.0-beta2 and legacy jquery.cycle.js

Created on 1 November 2024, about 1 year ago

Problem/Motivation

Found issues with Drupal 11 running jQuery 4.0.0-beta2 and legacy jquery.cycle.js (which is 14 years old).
Not only is the jquery.cycle.js failing but even core libraries in Drupal core are failing.

Proof I'm running jQuery 4.0.0-beta2

Load of jQuery library errors loading Drupal Core 11 with jQuery 4.0.0-beta2

To provide a bridge from legacy libraries, modules and core failures. I created a bridge module which adds back the $.isFunction() method using the "faster" expression. Instantly all of the errors go away.

However when loading the views_slideshow display the jquery.cycle.js fails with the new version of the libraries.
I isolated the code from the 14 year old code and created a patch to comment it out. From my testing, this has no affect on the functionality of the class or the drupal module settings and display/templates.

For loading the library using composer I write:

{
            "type": "package",
            "package": {
                "name": "malsyp/cycle",
                "version": "3.0",
                "type": "drupal-library",
                "extra": {
                    "installer-name": "jquery.cycle"
                },
                "dist": {
                    "url": "https://github.com/malsup/cycle/archive/refs/heads/master.zip",
                    "type": "zip"
                },
                "require": {
                    "composer/installers": "^2"
                }
            }
        },

Added to one's package array.

Next you should be able to "auto-install" the library with:

composer require "malsyp/cycle"

To load the patch to comment out of offending code on composer update I first register the patch.

       "enable-patching": "true",
        "composer-exit-on-patch-failure": false,
        "patchLevel" : {
            "malsyp/cycle": "-p1"
        },
        "patches": {

            "malsyp/cycle": {
                "D11 Jquery 4 malsyp/cycle": "docroot/patches/libraries/jquery.cycle/2024-11-01-jquery_cycle_D11.patch"
            }
        }

Then I run a composer update and it should patch the library.

composer upgrade -w

No need to rewrite anything or deal with dependency hell.

🐛 Bug report
Status

Active

Version

5.0

Component

Code

Created by

🇺🇸United States emptyvoid

Live updates comments and jobs are added and updated live.
  • jQuery

    Affects the version, handling, or usage of the jQuery javascript library.

Sign in to follow issues

Comments & Activities

  • Issue created by @emptyvoid
  • 🇪🇸Spain cesarmsfelipe

    Worked for me in Drupal 11.0.5! thanks

  • 🇨🇦Canada mediameriquat

    Very simple and straightforward. Works fine on Drupal 11.1.1 after a 10.4.1 upgrade. Thank you!

  • 🇺🇸United States tjtj

    Does the released D11 views_slideshow require this? My slideshow no longer slides in D11.

  • 🇺🇸United States tjtj

    What about using jquery.cycle2?

  • 🇺🇦Ukraine geophysicist

    Great work. Thanks.

    I had an issue with the patch - looks like the extra line was added.

    Here is updated patch

  • So I do understand well.
    If you installed the latest version of Drupal 11 x + This module is not working?

    I need insert this code into the composer.json ????

    {
                "type": "package",
                "package": {
                    "name": "malsyp/cycle",
                    "version": "3.0",
                    "type": "drupal-library",
                    "extra": {
                        "installer-name": "jquery.cycle"
                    },
                    "dist": {
                        "url": "https://github.com/malsup/cycle/archive/refs/heads/master.zip",
                        "type": "zip"
                    },
                    "require": {
                        "composer/installers": "^2"
                    }
                }
            },
  • 🇨🇦Canada danrod Ottawa

    Thanks for your work on this, appreciate it, but I have a few questions.

    1. Instead creating a patch for an old github library, why don't you just fork it and add the changes that we need to make it work in D11.
    2. Instead of the extra "custom" module that you attached and you expect us to install it with no prior checking, why don't we create a contrib project for supporting all these deprecated jQuery fuctions that we need?

    Please let me know and I can help on this, for now I'll work the jQuery Cycle project and add your changes there, if you don't mind.

  • 🇺🇸United States bogdog400

    Same problem for me. But can someone help me add this to my composer? I don't see a "package array".

    TIA

  • 🇺🇸United States bogdog400

    I haven't gotten around to installing everything. But I did comment out the paused function and that solved my problems.

    So thanks!

    +//$.expr[':'].paused = function(el) {
    +// return el.cyclePause;
    +//};

  • 🇨🇦Canada danrod Ottawa

    I create this small contrib module that intends to implement deprecated jQuery functions, this can be a good alternative to the custom module attached here as a zip, just in case.

  • Hi again

    Then installing the new module created by danrod "jQuery Deprecated Functions" is enough and there is nothing else to do?

    Best Regards

  • 🇺🇸United States bogdog400

    #13 works well for me on Drupal 11.1.7.

    Thanks!

  • 🇨🇦Canada danrod Ottawa

    Hello @sanvi_bcn, I think you still need the modified jquery.cycle library, but I have forked and added the changes for you: https://github.com/danrod96-new/cycle

    After that, you can install the new module I created and it should work fine after that:

  • Hello Danrod and thanks in advanced for your excellent work.

    I install your module "jQuery Deprecated Functions" and activated it. and I have uploaded the new files jquery clicle , but don't work I have the next message

    TypeError: undefined is not an object (evaluating '$.expr[':'].paused=function(el){return el.cyclePause;}')

    I leave you here the structure of my libraries folder

    /libraries/jquery.cycle/cycle.jquery.json
    /libraries/jquery.cycle/jquery.cycle.all.js
    /libraries/jquery.cycle/jquery.cycle.lite.js
    /libraries/jquery.hover-intent/jquery.hoverIntent.js
    /libraries/jquery.pause/jquery.pause.js
    /libraries/json2/json2.js

    Thanks

  • 🇬🇧United Kingdom brendanrjohn

    Thanks danrod. #13 and #16 applied together make it work for me on Drupal 11.1.6.

  • 🇨🇦Canada OMD

    Should this module be marked at Drupal 11 ready given very essential parts of this module do not work in Drupal 11? What is the good of a slideshow module that does not slide and for which the Next and Previous buttons don't work either?

    Not all production site policies will permit the installation of the solution in #13 where the module is not covered by Drupal's security policy.

    I know I would have not attempted the Drupal 11 update on this site had I known I was going to hit the particular roadblock. For me and likely others, this resulted in a huge time-waster as I now have to roll back to Drupal 11.

  • 🇨🇦Canada danrod Ottawa

    @omd I'm working into opting my module to be convered by Drupal's security policy and it's a lenghty process and you know that.

    Thanks for your understanding.

  • 🇨🇦Canada OMD

    That’s great news, @danrod, and I really appreciate the effort you’re putting in. I’m not trying to detract from your work—thank you for contributing this solution and for working toward security coverage.

    My point is about transparency for end users. Right now, there’s no way to know about the current limitations until you’ve invested time in trying the upgrade. For some of us, that means rolling back to Drupal 10 after discovering slideshow functionality isn’t working, which is a big disruption.

    If the module is marked as Drupal 11 ready while essential functions (sliding, next/previous buttons) do not work without an additional, not-yet-security-covered module, it is misleading. Even just an issue status, release note, or temporary adjustment to the “D11 ready” tag would give users a heads-up so they can plan accordingly.

    For me, having that information upfront would have made the decision clear: hold off on Drupal 11 until this issue is resolved. It’s not about criticizing the work—it’s about making the path clearer for Drupal users who aren’t as technically proficient, so they don’t get stuck after the fact. Keeping upgrades as smooth as possible is how we keep and attract users; frustrating them is how we risk losing them to the WP camp.

Production build 0.71.5 2024