How to Debug 'The "next" callback was never called inside of "beforeRouteEnter":'

I am new to Vue and working through some basic tutorials on Vue Mastery. Rather than work with their default data set I am using my WordPress blog for my API. This forces me to get a little more involved with the code. I am learning about route guards and I am getting an error with the following code. Everything up until this point has been working properly. Any tips on how to debug OR do you know what the error is?

beforeRouteEnter(routeTo, routeFrom, next) {
    PostService.getPosts(5, parseInt(routeTo.query.page) || 1)
      .then(response => {
        next(comp => {
          comp.posts = response.data
          comp.totalPosts = response.headers['x-wp-totalcount']
        })
      })
      .catch(() => {
        next({ name: 'NetworkError' }) 
      })
  },

This is the error I am receiving in Chrome.

1 Like

I’m having the same issue. Tried a few things and nothing seems to be working.

I ran into the same problem in the same hook and was able to resolve it by returning the promise returned by my call. In my case I’m making a call to axios.get, which I know returns a promise. I’m guessing that the return value of the hook is examined and, if it’s a promise, will allow it to resolve. Without returning the promise, the response is lost and destroyed before next can be called. I don’t know for certain.

Follow-up: It seems like the behavior may have been a bug. At the time, I was using vue-router@4.0.0-beta. I upgraded to vue-router@4.0.4 and the issue is now gone.

I am also running into this issue. I’m using vue router version 4.1.3. Running the code directly from the L9-end branch produces the same warning.

Edit: deleting all my node_modules and package-lock.json and rerunning npm install seems to have resolved this.

1 Like

@solidhex888 , you are a time saver! So anyone who gets into that issue should just delete the files as mentioned by Solidhex and reinstall npm. Thanks