Incompatibility with Drupal 11/jQuery 4

Thank you.

Thank you for contribution.

I have a new installation using Drupal 11.0.4.
I cannot get this to work.

I use Slick Carousel 3.0.3 on a few Drupal 10 sites with no problem.
This is a Drupal 11 specific problem.

I'm facing the same issue with Slick in Drupal 11. I'm using the latest versions of Drupal, the Slick module, Slick Views, and Blazy. I’ve created a Slick View to display images from a specific content type. When there is only one image, it displays correctly. However, when multiple images are added, I only get a blank space, and no images are shown.

I’m using the vanilla Slick configuration with dots for navigation instead of arrows, in case that's relevant. In my Firefox console, I see the following error:

Uncaught TypeError: $.type is not a function
    registerBreakpoints http://website.loc/libraries/slick/slick/slick.min.js?v=1.x:1
    Slick http://website.loc/libraries/slick/slick/slick.min.js?v=1.x:1
    slick http://website.loc/libraries/slick/slick/slick.min.js?v=1.x:1
    i http://website.loc/modules/contrib/slick/js/slick.load.min.js?v=11.0.4:1
    hn http://website.loc/modules/contrib/blazy/js/dblazy.min.js?skgu9l:1
    once http://website.loc/modules/contrib/blazy/js/plugin/blazy.once.min.js?skgu9l:1
    attach http://website.loc/modules/contrib/slick/js/slick.load.min.js?v=11.0.4:1
    attachBehaviors http://website.loc/core/misc/drupal.js?v=11.0.4:166
    attachBehaviors http://website.loc/core/misc/drupal.js?v=11.0.4:162
    insert http://website.loc/core/misc/ajax.js?v=11.0.4:1402
    jQuery 2
    insert http://website.loc/core/misc/ajax.js?v=11.0.4:1394
    commandExecutionQueue http://website.loc/core/misc/ajax.js?v=11.0.4:1046

Any help would be appreciated!

Update: I have resolved the issue with Slick Carousel in Drupal 11.

The problem was due to the use of $.type() in the slick.js file, which is no longer supported in jQuery 4 used by Drupal 11. To fix this, I replaced all instances of $.type() with appropriate native JavaScript methods.

Here are the specific changes I made in /libraries/slick-carousel/slick/slick.js:

1. Replace $.type() when checking for an array:

   Before:

   if ( $.type(responsiveSettings) === 'array' responsiveSettings.length ) {

   After:

   if ( Array.isArray(responsiveSettings) responsiveSettings.length ) {

2. Replace $.type() when checking for an object:

   Before:

   if( $.type( arguments[0] ) === 'object' ) {

   After:

   if ( typeof arguments[0] === 'object'  arguments[0] !== null !Array.isArray(arguments[0]) ) {

3. Replace $.type() when checking for a string:

   Before:

   else if ( $.type( arguments[0] ) === 'string' ) {

   After:

   else if ( typeof arguments[0] === 'string' ) {

4. Replace $.type() when checking if an argument is an array:

   Before:

   if ( arguments[0] === 'responsive' $.type( arguments[1] ) === 'array' ) {

   After:

   if ( arguments[0] === 'responsive' Array.isArray( arguments[1] ) ) {

5. Replace $.type() when ensuring a property is not an array:

   Before:

   if( $.type( _.options.responsive ) !== 'array' ) {

   After:

   if ( !Array.isArray( _.options.responsive ) ) {

After making these changes, I minified the updated slick.js file using UglifyJS to create a new slick.min.js. I replaced the old slick.min.js with this new one.

Once these steps were completed, the slider started working correctly again!

#8 is good. Thanks terminator727. I applied the same tricks and Slick is working properly in Drupal 11 and JQuery 4.

Sadly, the CSS change associated with this issue from commit 299772e4 is having unintended consequences on my theme.

We have code like this:

  .view-events-today .view-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }

But due to the overqualified CSS provided by this module via the aforementioned commit for this issue, our display: flex is overridden with a .block .view .view-content { display: block; }.

Most importantly:

• The view that broke does not use Slick at all.
• The theme we're using is not at all related to Olivero.

Why was this change made?

- /* Fix for unnecessary Olivero Grid surprises causing Slick excessive height. */
- div[class*="view-slick"],
- div[class*="view-slick"] .view-content,
- div[class*="view-blazy"],
- div[class*="view-blazy"] .view-content {
+ /* Fix for unnecessary Olivero Grid surprises causing Slick excessive width. */
+ .view,
+ .view .view-content,
+ .block .view,
+ .block .view .view-content {
  display: block;
}

It seems like there must be a better way to scope this to fix something specifically for the Olivero theme.

Since this issue is closed, this bug needs a follow-up to get this addressed properly. Unfortunately, the project I'm working on is over budget and we don't have bandwidth to properly test another approach to fixing this so that A) it doesn't affect non-Slick views, and B) it doesn't affect Non-olivero themes. So for now, I'm forced to fix this by over-overqualifying our own CSS with .block .view-events-today .view-content { display: flex; }.

I've created a follow-up #3484413: Overqualified CSS to fix Slick Views on Olivero theme breaks any theme and any view.

#8 is very helpful. thank you!

(however, some "&&" are missing)

I forked the Slick Github project to apply the jQuery 3+ deprecations fixes found here.

And then added this to my composer.json file:

  "require": {
    ...
    "mably/slick": "^1.8"
  },
  "repositories": [
    ...
    {
      "type": "package",
      "package": {
        "name": "mably/slick",
        "version": "1.8.2",
        "type": "drupal-library",
        "source": {
          "url": "https://github.com/mably/slick.git",
          "type": "git",
          "reference": "topic/jquery4"
        }
      }
    }
  ]

Thanks #8

I attached modified slick.js

I tried >10 online compressors and every time I got

Uncaught SyntaxError: expected expression, got '&'

Who can share working slick.min.js ?

Ivnish, your version on #14 is working for me. I didn't see any JS errors.

@jay.chen this is not minified version. I speak about minified

This is minified code, and after change file, should clear cache of browser too.

@trydoknight, thanks, I will test it later

@trydoknight, I tested your slick.min.js and it doesn't work for me in Drupal 11. No errors in js console and slider doesn't work too

If someone needs a patched 1.6.0.

Feel free to share and contribute any relevant solution exactly related to this issue.

Thank you!

Same as #20
Tested with the attached files but it doesn't work for me in Drupal 11 (installed via Drupal cms).
No errors in js console and slider doesn't work too.

Thank you

#8 is good. I'm going to create a patch to have it in the community

Fix for slick 1.8.0v

#26 is good, I'm also going to enter the changes to slick.min.js because otherwise it wouldn't work for me!

Patch #27 works perfectly, thank you

@gausarts just wanted to let you know that kenwheeler seems to have made a commit 5 days ago at https://github.com/kenwheeler/slick

Maybe you could try contacting him about this and maybe something like a co-maintainership for the project?

@anybody, thank you.
The commit has nothing to do with the issue, CMIIW:
https://github.com/kenwheeler/slick/commit/b17846511cabf4572c696238a8765...

And no new relevant release, either, as per this writing.

This module had fixed that type of issue since the first release 10 years ago as long as you allow the module to do the fixes for you via it's options:
https://git.drupalcode.org/project/slick/-/blob/7.x-2.0-alpha1/css/theme...

Anyway, please see the project home Broken vs working library versions. There are two fundamental issues mentioned:

• The new default value of rows since 1.8.0/1 causing broken displays, etc.
• D11 issue as the OP reported.

Without addressing both, we'd better stick to working versions with solutions by having strictly supported versions and the other as proposed above by our good fellas of Drupal.

About co-maintainership, etc., I would better leave it to their best priority, and your minor efforts as provided-above on this particular issue. Unless somebody is willing to pay my time, of course :)

Thank you.

Thank you for the quick and extensive feedback @gausarts! Sorry I got that wrong and thanks for the explanations!

I created a module that implements many of the jQuery Deprecated functions/objects/constants that are not included in jQuery 4, maybe this can be useful to fix some of the issues here:

https://www.drupal.org/project/jquery_deprecated_functions

Maybe this helps.

Hi @danrod, your module sure helps. It brings back the old fun. Thank you!

Are there any downsides to still supporting these jQuery Deprecated functions/objects/constants on a D11 site?

Hi @chike thanks a lot for your input, much appreciated !

I made this module to continue supporting these modules (such as this one) that still rely on old Javascript/jQuery libraries that don't seem to have been updated in a long time and still use old code. This module should be temporary solution, not a permanent one.

The maintainers of these modules (such as slick or views_slideshow) should think of writing their own vanilla JS instead or using different newer libraries. I even don't encourage to use jQuery at all.

We are currently working on upgrading our site from Drupal 8 to Drupal 11. Previously, we were using the

FlexSlider module

, but since it is not available for Drupal 11, we explored alternatives like the Slick module.

While setting up Slick in Drupal 11, we encountered a console error:
Uncaught TypeError: i.type is not a function
To resolve this, we applied the patch provided by @luca.pecchiura in comment #23, and it worked perfectly. The Slick carousel is now functioning as expected in Drupal 11.

Thank you for your valuable contribution!

Just ran into this issue:

Downloaded the latest version of slick.js here:
https://github.com/kenwheeler/slick/blob/master/slick/slick.js

Which was modified last week and fixed the problem.

Thanks everyone for the great help and feedback!

Yes @dydave the .js is there however the minified is not updated.

#8 helped before I see #36.

Thank you all for this work.

Hi @danrod,

I tried your module on a site that I upgraded to Drupal 11.2.2.
This allowed the Slick Slider to work as it did in Drupal 10 in all browsers, logged in and anonymous.

I tried it on another site to allow Slick Slider to work as it did in Drupal 10.
But it only works in Chrome when logged it.

Any suggestions as to how to make this work?

Thanks

Update July 10,2025

The sites where this module works are both Drupal 11 sites using a Bootstrap4 base theme.

The site where this module does not works is a Drupal 11 site using a Bootstrap5 base theme.
I have just tried this on a ddev fresh install of Drupal 10 updated to Drupal 11.
Looks like it is time to say goodbye to Bootstrap4.

Confirming that #13 works!

The patch in #27 works for us. Thanks, @alfonsotem!

Regarding #37 here's the related .min.js issue: https://github.com/kenwheeler/slick/issues/3649
Quite weird!

PS: If anyone needs it, I prepared a fork that, at least for us, seems to work reliably: https://github.com/webksde/slick/releases/tag/1.8.1-jquery4compatible

For composer repositories:

{
      "type": "package",
      "package": {
        "name": "webksde/slick",
        "version": "1.8.1",
        "type": "drupal-library",
        "_readme": "!! PATCHED !! See https://github.com/webksde/slick/releases/tag/1.8.1-jquery4compatible",
        "dist": {
          "url": "https://github.com/webksde/slick/archive/refs/tags/1.8.1-jquery4compatible.zip",
          "type": "zip"
        }
      }
    },

I'm not currently using this module but ran into this issue on one of my client sites that had the slick library referenced directly. Switching from $.type to typeof seems to do the trick. I was already switching to the accessible-slick fork when I found this pull request addressing the same issue over there: https://github.com/Accessible360/accessible-slick/pull/104/files

Vielen Dank an @luca.pecchiura
Die ZIP-Version mit den beiden slick.js Dateien hat mein Problem gelöst.

Still no tagged release, but if you use slick v1.8.1, the master-branch now has the minified version of the jQuery4-fix (commit 04859f7).
I use composer with asset-packagist.org, just installing it with composer require npm-asset/slick-carousel:dev-master worked for me.

But of course, this is still v1.8.1 which is not a supported release for this module!
As stated in #30, better use a patched v1.6.0 and patch it (Pinning npm-asset/slick-carousel to 1.6.0 and patching with #25 works for me)

We are running Slick 1.7.1. After we upgraded to Drupal 11, we installed the jquery_deprecated_functions. The missing piece was to uninstall BigPipe. (The page at admin/config/media/slick/ui does mention the incompatibility with BigPipe)

> The missing piece was to uninstall BigPipe

FYI, 2 issues:

• JavaScript, was fixed locally by Blazy.
• CSS, not fixed, yet. Left to core for real solutions.

In short no need to uninstall BigPipe now, see:
https://www.drupal.org/project/blazy/issues/3361143

The latest Blazy should be fine with BigPipe, except for complicated AJAX setup which should also be fine at least with the latest DEV. Please try Blazy DEV pre 3.0.14 if any issues specific with AJAX setups, and confirm OK so we can release a new version.

The CSS reordering issue is core problem, and should be fixed there.

Warning was provided more as an FYI.

However not really fatal, IMO, only causes minor stylings like arrows styles being reset due to BigPipe CSS reordering, etc.

If you know CSS, a minor fix would do.

This CSS issue only happens if you enable custom loaders at UI which is not really recommended by default. If you left it disabled, no real issues, IIRC.

Hi folks. Thanks for working on this.

For those who are using 1.8.1 (with all the respect to maintainers' recommendations), here is the repository config that worked for me with the original library, not a fork:

"repositories": [
    {
        "type": "composer",
        "url": "https://asset-packagist.org",
        "exclude": [
            "npm-asset/slick-carousel"
        ]
    },
    {
        "type": "package",
        "package": {
            "name": "npm-asset/slick-carousel",
            "version": "dev-master",
            "type": "drupal-library",
            "source": {
                "type": "git",
                "url": "https://github.com/kenwheeler/slick.git",
                "reference": "master"
            }
        }
    },
    {
        "type": "composer",
        "url": "https://packages.drupal.org/8"
    },
    {
        "type": "composer",
        "url": "https://asset-packagist.org"
    }
],

Then needs to run composer require npm-asset/slick-carousel:dev-master

Just running the command without repository config (with all the respect to @mullzk at #44) loaded some old version.

I found I needed to re-roll a patch for version 1.8.0 of npm-asset/slick-carousel, based on the patch in #27. Here are our relevant details:

drupal/core-recommended: 11.2.4
drupal/slick: 3.0.4
npm-asset/slick-carousel: 1.8.0

I applied the attached patch using this bit of composer.json:

"extra": {
    "patches": {
        "npm-asset/slick-carousel": {
                "Issue #3467129: Incompatibility with Drupal 11/jQuery 4": "patches/upstream/slick-carousel-1-8-0--jquery-4-compatibility--3467129-27.patch"
            }
    }
}

The patch includes changes to slick.js and slick.min.js. The latter was produced using terser

npm install terser -g
terser ./slick/slick.js -o ./slick/slick.min.js

Patch #42 for accessible-slick is not right as it uses

typeof _.options.responsive !== 'array'

which should be

!Array.isArray(_.options.responsive)

See https://github.com/Accessible360/accessible-slick/issues/103 for a patch that includes the above.

Re #49 And now there's another one, see https://github.com/Accessible360/accessible-slick/issues/110.

Maybe #3196529: Support Accessible Slick is a chance to fix responsiveness and these issues?

Updating to D11 and hit the Slick/jQuery 4 wall. CoPilot flagged the missing $.type and suggested a minimal polyfill injected via libraries-extend. I'm running Slick 1.8.0 unpatched (as far as I can tell), and everything’s functional: no console errors, carousel behaving as expected and no patching required. Polyfill is scoped to Slick usage only. Any concerns about trying this i should be aware of?

(function (window, $) {
  if (!$ || typeof $.type === 'function') {
    return;
  }

  $.type = function (obj) {
    if (obj === null) return 'null';
    if (Array.isArray(obj)) return 'array';
    return typeof obj;
  };
})(window, window.jQuery);

this is how CoPilot suggested wiring it in; i haven't read up on loading order dependencies so i don't know if this is being done correctly. It works though.

CUSTOM_MODULE.libraries.yml:

# Polyfill library to restore $.type() for Slick under jQuery 4.
# Note: Load ordering is ensured via dependencies, not weight.
jquery-type-polyfill:
  version: 1.x
  js:
    scripts/jquery-type-polyfill.js: {}
  dependencies:
    - core/jquery

# Helper library with no assets; used only to inject the polyfill as a
# dependency of slick/slick via libraries-extend in the theme info.yml.
slick-polyfill-dep:
  version: 1.x
  dependencies:
    - CUSTOM_LIBRARY/jquery-type-polyfill

CUSTOM_MODULE.info.yml:

libraries-extend:
  slick/slick:
    - CUSTOM_LIBRARY/slick-polyfill-dep

Good idea. Thank you, @j.!

Blazy did polyfills for BC, never thought about it for this issue. The beauty of sharing. The best solution is to fix Slick library, however I don't mind 0.N kb for cross versions, less works for most users, at least.

Feel free to make a patch in here.

To benefit others and avoid potential weight issues with BigPipe, please make it fixed at -19, below jQuery:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/core.librarie...

And use the minified version, while keeping the non-minified in js/src folder for convention since core minification is less robust:
https://git.drupalcode.org/project/slick/-/tree/3.0.x/js?ref_type=heads

And make it as Slick's dependency to replace core/jquery here:
https://git.drupalcode.org/project/slick/-/blob/3.0.x/slick.libraries.ym...

Feel free to use online JS compressor, normally better than IDE.

Thanks for feedback. Making a patch is on the todo list.

One last two standing issue down. \o/

Thank you all for kind and quality contributions!

I just installed Slick 3.0.6 on a Drupal 11 site where the Slick slideshow was broken.

On this site I had used the jQuery Deprecated Functions (https://www.drupal.org/project/jquery_deprecated_functions) which made the previous version of Slick work.

So I installed Slick 3.0.6, then uninstalled jQuery Deprecated Functions.
The slideshow works nicely.

Thank you.