Summer Sale! All accounts are 50% off this week.

wood4283's avatar

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.

0 likes
5 replies
wood4283's avatar
wood4283
OP
Best Answer
Level 20

Turns out my build was looking for browserify-timers. I added import { clearInterval } from 'timers' to my app.js file and everything worked.

Please or to participate in this conversation.