updateSizes function fails when mounting again

[ttamminen]

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: #30

What are your thoughts, boss?

[leandrowd]

Hi @ttamminen, what is causing the component to mount again?

[ttamminen]

The carousel is in a view that is shown when user wants to see more information. The mounting and unmounting is controlled by React Router and in this case it is right thing to do. Think carousel to be shown on /detail/123 URL and in other cases it is not created.

[leandrowd]

I see, feel free to submit the PR :)

[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;