React-slick: This is a no-op

[hasankhalid]

As far as i know this was an issue with version 0.20. I updated to 0.23 and i had developed the project when the version was 0.20. I am still getting the error, i am not sure what is going wrong

Error: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component

Settings1: var settings = {
autoplay: true,
autoplayspeed: 500,
dots: false,
slidesToShow: 5,
slidesToScroll: 1,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,

      }
    },{
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      }
    }
  ]
}

Settings#2: dots: true,
arrows: false,
fade: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 6000

[laveesingh]

This issue has been fixed in the latest releases. Please make sure you're using the latest version of react-slick.

[hasankhalid]

I have the latest version. I updated. The node modules show version 0.23.1 and npm outdated does not show react-slick

[hasankhalid]

does my code have an issue?

[hasankhalid]

I restarted and the error has not come yet. However all div's i set inline styles for flex are now inline-block and the style is not updating. What could be the issue here?

[hasankhalid]

Shifted to 0.21 and the display flex and the inline styling is working now. But the console now gives an error saying cannot read property queryselector of null please check the innerslider component

[hasankhalid]

I had to revert back to 0.23 due to errors in 0.21 and the redundant autoplay warning in 0.22. How do i get to use inline styling with this version?

[andrewmclagan]

Also seeing queryselector of null errors:

In our error logger we are getting about 30 - 40 of these an hour:

TypeError: null is not an object (evaluating 'n.querySelector')
1 File "webpack:///./node_modules/react-slick/lib/mixins/helpers.js" line 45 col 1 in e
var slideHeight = (0, _innerSliderUtils.getHeight)(slickList.querySelector('[data-index="0"]'));
2 File "[native code]" line (unknown) in e

[juancamilov06]

I have this error too, it usually happens when a component is unmounted but not always.
This is the log that i'm getting

Any workaround?

[andrewmclagan]

We cleared this by updating to the latest version and implementing polyfills

import 'core-js/fn/object/assign';
import 'core-js/fn/string/ends-with';
import 'core-js/fn/string/starts-with';
import 'core-js/fn/string/includes';
import 'core-js/fn/array/includes';
import 'core-js/fn/array/find';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';

These are to cover other issues with our app as well so take them with a grain of salt. This is just a suggestion. The issue may have been resolved by upgrading to the latest version.

[mp-jwolkerstorfer]

I experience this issue when changing the content of the slider (significant change to slide data without unmounting component). I can't find a way to unmount and remount the sliders separately from the rest of the page (parent component). Artificially unmounting/remounting the parent component is (a) not feasible in my case and (b) does not seem well supported by React anyway.

For my situation, the source of the problem in react-slick seems to be a missing presence check (asNavFor && asNavFor.innerSlider.state && ... complains that it can't read state of null).

[maddhruv]

can you give your code for reproducing this issue?

[andyfurniss4]

Also getting this issue and it's clogging up my error logging!