clear intervals and timeouts on nuxt.js build - vue.js

Question

On my website I have a few intervals and timeouts set, for things such as a carousel. Now I do clear them on the components destroyed() lifecycle hook. But I am still getting this build warning.
This is an example of one of my components
<script>
data() {
return {
carouselInterval: null
}
},
created() {
this.startInterval();
},
methods: {
startInterval() {
this.carouselInterval = setInterval(() => {
...
}, 5000);
}
},
destroyed() {
clearInterval(this.carouselInterval);
}
</script>
I also have a timeOut like so
<script>
data() {
return {
testTimeout: null
}
},
created() {
this.startTimeout();
},
methods: {
startTimeout() {
this.testTimeout = setTimeout(() => {
...
}, 5000);
}
},
destroyed() {
clearTimeout(this.testTimeout);
}
</script>
Now I would assume this would clear these timing functions but, I am still getting this warning.
Is there something I am doing wrong? Is there another way to clear all timing functions on build?
EDIT
I am 100% sure I have cleaned up all timing functions on the destroyed() lifecycle hook

Answer 1

The destroyed() lifecycle hook does not get called whilst using SSR. You can read more about this here SSR component lifecycle hooks
This means you can not use it to clear timeouts on the server.
You can solve this issue by moving your interval functions to either be called in the mounted() or beforeMount() lifecycle hooks since they are only called on the client side.
In your example you can change your code to be
<script>
data() {
return {
carouselInterval: null
}
},
mounted() {
this.startInterval();
},
methods: {
startInterval() {
this.carouselInterval = setInterval(() => {
...
}, 5000);
}
}
</script>
This will prevent the nuxt.js build from timing out.