Turns out my build was looking for browserify-timers. I added import { clearInterval } from 'timers' to my app.js file and everything worked.
Jun 28, 2019
5
Level 20
clearinterval issue
I'm not sure if this is a Vue issue or possibly a laravel-mix issue.
My component code looks like this:
export default {
props: ["projects", "slideLength", "isActive"],
data() {
return {
currentProject: 0,
interval: undefined
};
},
watch: {
isActive(value) {
if (value) {
this.startSlides();
} else {
this.stopSlides();
}
}
},
methods: {
startSlides() {
this.interval = setInterval(() => {
this.currentProject < this.projects.length - 1
? this.currentProject++
: (this.currentProject = 0);
}, this.slideLength);
},
stopSlides() {
clearInterval(this.interval);
}
}
};
</script>
When isActive === true the slides start without issue, but when isActive === false and the watcher updates and fires the stopSlides() method. I get a console error of:
[Vue warn]: Error in callback for watcher "isActive": "TypeError: timeout.close is not a function"
found in
---> <Flickr> at resources/js/components/Flickr.vue
<FlickrSlide> at resources/js/slides/FlickrSlide.vue
<Slides> at resources/js/components/Slides.vue
<App> at resources/js/App.vue
<Root>
app.js:6711 TypeError: timeout.close is not a function
at ./node_modules/timers-browserify/main.js.exports.clearTimeout.exports.clearInterval (app.js:3724)
at VueComponent.stopSlides (app.js:1932)
at VueComponent.isActive (app.js:1919)
at Watcher.run (app.js:9375)
at flushSchedulerQueue (app.js:9119)
at Array.<anonymous> (app.js:6803)
at flushCallbacks (app.js:6729)
I would appreciate all ideas as to why this isn't working.
Level 20
Please or to participate in this conversation.