Conflict with .destroy() methods of other plugins

[moevbiz]

I'm experiencing this issue when trying to destroy instances of other plugins inside beforeLeave, specifically scrollbooster and infinite scroll.

Both of the plugins work fine when I initialize them inside beforeEnter or afterEnter, but when trying to use sb.destroy() or infScroll.destroy() when leaving the page with beforeLeave, I am getting an error warning in my console and the next page doesn't load. The same error also happens when simply trying to console.log(infScroll) on beforeLeave.

        namespace: 'editorial',
        beforeEnter(data) {
            let viewport = document.querySelector('.tagcloud')
            let content = viewport.querySelector('.scroll_content')

            let sb = new ScrollBooster({
                viewport: viewport,
                content: content,
                bounce: true,
                onUpdate: (data)=> {
                    content.style.transform = `translateX(${-data.position.x}px)`;
                },
                onClick: (data, event) => {
                    if (Math.abs(data.dragOffsetPosition.x) > 5) {
                        console.log(event.target);
                        if (event.target.classList.contains('link')) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }
                },
            });

            let elem = document.querySelector('.posts_container_editorial');
            let infScroll = new InfiniteScroll( elem, {
                path: '.view-more-button_editorial',
                append: '.post',
                history: false,
                button: '.view-more-button_editorial',
                // load pages on button click
                scrollThreshold: false,
                // disable loading on scroll
                debug: true,
            });

        },
        beforeLeave(data) {
            sb.destroy();
            infScroll.destroy();
        }

Is there something I'm missing? I've used destroy() on other sites with other plugins and it's working well… I'll try and recreate this on a demo page, but is there maybe something I can try beforehand?

[nicolas-cusan]

Hi @moevbiz the variables sb and infScroll are local to the beforeEnter method and therefor are undefined in beforeLeave. Declare them somewhere outside so they are available in both methods. Something like this:

const myTransition = () => {
  let sb;
  let infScroll;

  return {
    beforeEnter(data) {
      sb = new ScrollBooster(/*...*/);
      infScroll = new InfiniteScroll(/*...*/);
    },

    beforeLeave() {
      sb.destroy();
      infScroll.destroy();
    }
  }
}

[thierrymichel]

@moevbiz as transitions are simple objects, you can also store your instances as properties (e.g. this.sb).

[moevbiz]

oh wow @nicolas-cusan thanks for pointing that out to me. 😵and thanks @thierrymichel for the hint.