updateSizes function fails when mounting again

The problem underlying problem is that this.item1… this.itemN (created by refs callback in render) are null when mounting the component again, but only in certain scenarios.

I have verified that the items are set and selectedItem points to a valid item.

The error comes from this line: var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;

Uncaught TypeError: Cannot read property ‘clientWidth’ of null at Object.updateSizes (app.min.js:85207) at Object.setMountState (app.min.js:85216)

firstItem is null because in the line var firstItem = ReactDOM.findDOMNode(this.item0); the item0 is undefined.

The good news is that I have a fix for the problem!

It seems that this event is never removed and is triggering setMountState:

initialImage.addEventListener('load', this.setMountState);

If I modify the componentWillUnmount:

    componentWillUnmount() {
        var images = ReactDOM.findDOMNode(this.item0).getElementsByTagName('img');
        var initialImage = images && images[this.props.selectedItem];
        initialImage.removeEventListener('load', this.setMountState);
        this.unbindEvents();
        this.destroyAutoPlay();
    },

The error is gone after this change!

I tried to create a fork that would have a reproducible error. Unfortunately, I could not pin down the exact combination when this occurs. The project where I can reproduce the bug is written in TypeScript and has more “stuff”.

I could make you a PR with the fix. What I would do is extract new function called getInitialImage that could be used in componentWillUnmount and componentDidMount.

This issue is most likely related: https://github.com/leandrowd/react-responsive-carousel/issues/30

What are your thoughts, boss?

[leandrowd]

Hi @ttamminen, thanks for you PR. All your changes are published as 3.1.7 in npm.

[travelrus]

Seems like this issue reproduces again on 3.2.7

I’m not very expirience in this but maybe it does make sense to relapce the line

var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight; on var itemSize = firstItem ? isHorizontal ? firstItem.clientWidth : firstItem.clientHeight : 0;