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

Created on 1 November 2024, 7 months 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
  • πŸ‡ΊπŸ‡ΈUnited States emptyvoid
  • πŸ‡ΊπŸ‡ΈUnited States 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

Production build 0.71.5 2024