slick.js error - Uncaught TypeError: Cannot read property 'off' of null (slick.js:line 19)

[R4NSS]

Hi, I have implemented this slider on a large scale website, however I have come across an issue when you have a tabbed element with a slick carousel in each tab when viewed on tablet and mobile devices. I need to get this fixed rather urgently as its now on a live site :(

The error being reported is

Uncaught TypeError: Cannot read property 'off' of null (slick.js:line 19)

I am happy to provide more details including site domain in a private message or email.

[leggomuhgreggo]

You'll want to recreate the issue in a fiddle/pen if you want help. I have a basic slick template you can fork if you'd like.

[R4NSS]

Due to the nature of the ecommerce platform we are using, the code is a little messy and scattered in several places (jsp's).

The live site url is

http://thetoyshop.com/Iron-Man/Marvel-Avengers-Battlers---Iron-Man-Figure/p/519880_A1823?productGridView=0

Issue occurs when you resize the browser into tablet or mobile size and then select the Related Products tab. This is more than likely due to some code that has been introduced from our side as everything is so deeply linked.

[R4NSS]

Has anyone tried this slider on a tabbed element with a slider in each tab for tablet and mobile devices?

[leggomuhgreggo]

Can't say I have. If you make a fiddle/pen and work backwards I bet that'd be useful. When bug hunting I just console.log at every stage and try to see where a disconnect is happening. Good luck.

[simeydotme]

@R4NSS -- are you using a plugin to create your tabs? and does the HTML content of the tabs change between mobile/desktop views. It sounds like your tabs are manipulating the HTML and so there's no element for Slick to run .off() on anymore.

If I get some time I might look at your live site, but as @leggomuhgreggo says, if you create a JSFiddle with just the components needed to recreate the issue, we can help a lot easier. -- All you need is to fork the fiddle in the contribution.markdown file and add your tabs to it :)

Simon;

[R4NSS]

The tabbed plugin was already present when i joined this project so will investigate how that is built. The whole site is built using the Hybris Ecommerce Platform using jsp's, etc

I will try and find some time in the next day or so to create a fiddle as am now on another client project lol.

I will update the ticket here and hope you guys can some shed some of your expertise knowledge on thsi as i dont really want to look for another slider so far down the line now.

[crstauf]

something interesting, might be part of this problem:

if I use slick.min.js, i get the error "Cannot read property 'off' of null, slick.min.js:17" but if I use the unminified version (slick.js), i get the error "Cannot read property 'add' of null, slick.js:2469"

the slider appears to work fine, except for 16+ errors in the console log...

[ian-bullock]

In my experience this was happening only if my script tried to instantiate slick 2x or more on the same element, then destroy it. Make sure your script never doubles up on adding slick before removing.

[crstauf]

I am using it in combination with a lazy loading script (lazysizes), which
took some hacking to get to work properly, so maybe that's the cause of my
issue. (I am aware that slick has it's own lazy loading feature; might try
that at some point, see if that resolves the errors.)

Caleb Stauffer

On Tue, Jul 14, 2015 at 12:05 PM, ian-bullock [email protected]
wrote:

In my experience this was happening only if my script tried to instantiate
slick 2x or more on the same element, then destroy it. Make sure your
script never doubles up on adding slick before removing.

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1407#issuecomment-121291937.

[crstauf]

removing the responsive object results in no errors in console log:

responsive: [
    {
        breakpoint: 1920,
        settings: {
            slidesToShow: 4,
            slidesToScroll: 4,
        },
    },
    {
        breakpoint: 1500,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
        },
    },
    {
        breakpoint: 1136,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
        },
    },
    {
        breakpoint: 809,
        settings: "unslick",
    },
]

thoughts??

[simeydotme]

My thoughts are; you need to follow the contributing guidelines and create a JSFIDDLE and describe your issue clearly and how to recreate it before we can help you :)

[S-YOU]

I got similar errors on responsive params with version 1.5.4 before, but its fixed since 1.5.6 for me.

[crstauf]

updating to a newer version did resolve the "Cannot read property 'off' of null, slick.min.js:17" error, and i now get 'add' instead. will try to replicate in JSFIDDLE and post here.

[S-YOU]

Right, I got "add" error too, but slick working no problem to me. So, just ignoring, also I am using jquery 3.0 alpha, so was not sure which lib cause that error.

[crstauf]

okay here, check this out: http://codepen.io/anon/pen/NqOMJG

tried using JSFIDDLE, but wouldn't count elements, for whatever reason.

[crstauf]

a little more work, found the problem: was initializing more than once. my apologies for wasting anyone's time. :-/

[askalia]

Same as @crstauf : initialized more than once.

[suniel]

Faced the similar issue and was initializing the slider more than once.
Thanks @crstauf, @askalia

[ralph-krausse-msi]

Could you clarify what you mean with initializing? Is there a method you called more than once?

[crstauf]

not intentionally, but I discovered a situation wherein initialization was
occurring a second time, without destroying the first instance.

On Tuesday, April 5, 2016, ralph-krausse-msi [email protected]
wrote:

Could you clarify what you mean with initializing? Is there a method you
called more than once?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1407#issuecomment-205959834

Caleb Stauffer

[kraftwer1]

It happened to me, too. It would be great if it would just silently fail if there's already an instance (or, if that's too extreme, print a warning).

[henrypenny]

I did this:

        if(!$(...).hasClass('slick-initialized')) {
            $(...).slick();
        }

[naveenrk]

Check this , Calling multiple times will not give the above error http://jsfiddle.net/fmo50w7n/372/

[georgios-ms]

Happened to me too, in my case I used asNavFor but the referenced object didn't exist anymore.

[kenwheeler]

Got an example of that happening?

[saroar]

remove duplication help for me solve error

[evthedev]

@georgios-ms that worked for me, thanks mate.

[iamdave210]

I got this error when I upgraded from 1.6.0 to 1.7.1. I did not change any of my code. Rolling back to 1.6.0 fixed it.

[adamfoale]

Hi all. It's a bug in version 1.7.1. Line 775. If you add a check for the the existence of _.$prevArrow and _.$nextArrow in the _.options.accessibility === true block, it behaves as expected.

i.e. change the following...

if (_.options.accessibility === true) {
      _.$prevArrow.off('keydown.slick', _.keyHandler);
      _.$nextArrow.off('keydown.slick', _.keyHandler);
}

to

if (_.options.accessibility === true) {
      _.$prevArrow && _.$prevArrow.off('keydown.slick', _.keyHandler);
      _.$nextArrow && _.$nextArrow.off('keydown.slick', _.keyHandler);
}

I'll let Ken know.

[dotZak]

I'm having the same problem as @iamdave210 after upgrading from 1.6.x to 1.7.1. The bug is exactly what @adamfoale pointed out.

Has someone opened a new issue for this?

[stefkes]

Confirming the error happens in 1.7.1 when using the responsive object and that it's fixed in 1.8.1