React-slick: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

[pixelatorz]

I am creating a slider it does render the component and the styles however I do get a js error:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

the code is:

render()
    {
        var settings = {
            dots: true,
            infinite: true,
            speed: 500,
            arrows: false,
            autoplay: true,
            slidesToShow: 3,
            centerMode: true
        };

        return (
            <Slider {...settings}>
            {
                ObjectToArray.toArray(this.props.winners).map(function (raw, i) {
                    let winnerData = raw.value;

                    return (
                        <div>
                            <Winner userName={winnerData.userName}
                                    sex="male"
                                    rank={winnerData.rank}
                                    game={winnerData.game}
                                    date={winnerData.createdOn}
                                    winnings={winnerData.winnings}
                                    userRank={winnerData.userRank}
                            />
                        </div>
                    );
                }.bind(this))

            }
            </Slider>
        );
    }

when dragging the items they seem to collapse and the following error occures:

recently-won.react.js:5636 Keys Missing Object {slideIndex: 0, trackRef: undefined, className: "", adaptiveHeight: false, arrows: false…}

any idea?

[gajmani]

Do we have the fix / workaround for this ?
The moment I load the template with "Slider" tag in it. It complains
Cannot read property 'getBoundingClientRect' of null
line 743 of react-slick.js
var trackWidth = this.getWidth(_ReactDOM2['default'].findDOMNode(this.refs.track));

[djbobbydrake]

Seeing the same issue. Any word?

[thomasmattheussen]

Also seeing this issue. I think it only occurs when the slides are dynamically generated.

The solution here, fixed it for me.
https://github.com/akiran/react-slick/issues/328

[akiran]

Can everyone try solution provided in #328 fixes your issues as well.

If you still see this issue, can you provide a jsfiddle demo replicating the issue

[sshmyg]

328 works https://jsfiddle.net/20bumb4g/1293/

[guyalon]

i managed to sove it like this:
<Slider ref="simpleSquare" {...settings}> {this.state.items || <div></div>} </Slider>

[shasha-signifai]

So I solved it like this:

Wrap the dynamic slide component with

, such as

[RakeshBurde]

I have degrade the version of react-slick from 0.14.5 to 0.13.6. and it works for me.

[crw]

Ran into this issue, #328 "fixed" it for me as well.

[markmcdermid]

This was happening for me because I didn't pass anything to the component, so I just created a wrapper to check if no children are passed.

[arjunskumar47]

Even though I have wrapped inner components inside div, I'm getting this error.

The stack trace shows the parent call happened in this.update() invoked from componentWillReceiveProps.

Anyone facing similar issue?

I tried to throttle CPU to test if it is related to performance, but no luck in reproducing.