Vue-router: [next] beforeRouteEnter : vm is undefined inside promise

[swannknani]

Hi,

I'm experiencing a weird issue when using [email protected].
According to : release docs, I'm trying to fetch data with a random API (no matter witch API I use) but the vm callback is undefined.
In the other hand when I'm logging vm without using a request promise, vm is defined.

beforeRouteEnter(route, redirect, next) {

    return superagent
    .get(PATH_API + PATH_PROJECTS)
    .end((err, res) => {

        next(vm => {

            // Here vm is undefined 
            console.log(vm);

        });

    });
}

beforeRouteEnter(route, redirect, next) {
    next(vm => {

        // Here vm is defined 
        console.log(vm);

    });
}

[fnlctrl]

beforeRouteEnter doesn't support returning a Promise, remove your return and it should work.

beforeRouteEnter(route, redirect, next) {

  superagent // remove return
    .get(PATH_API + PATH_PROJECTS)
    .end((err, res) => {

        next((vm) => {


            console.log(vm);

        });

    });
}

[swannknani]

Hi @fnlctrl

It doesn't, I already try this.
Maybe can you give a try before closing the issue.

Regards

[fnlctrl]

You didn't provide a repro as the issue reporting guideline required.
Please realize that people don't have the time to create a test project to debug for the problems you encountered, nor is anyone obligated to do so.

[swannknani]

If you need me to provide repro just ask me then and I will be delighted to do so.
Therefor you should be aware that closing an issue than can be relevant for other people without even waiting for my feedback regarding your answer cannot be acceptable.

[LinusBorg]

If you need me to provide repro just ask me then and I will be delighted to do so.

The Issue Guidelines that appear when you open an issue clearly state that we want/need a reproduction.

Please understand that if we leave open every issue that has no reproduction and doesn't appear to be a bug from the information that was provided (event hough yours may indeed be a bug), the issue list would get very crowded.

We close those issues to keep the list manageable - yet we don't lock those issues, so the authors can provide further info that may warrant a reopening of the issue - like it happened here.

[mattjneuber]

I'm having a similar with vue-resource in beforeRouteEnter.

beforeRouteEnter (route, redirect, next) {
    Vue.http.get('../jobs/get_job_data', '', {params: {jobId: route.params.id}}).then((response) => {
        next(vm => {
            console.log('hello')
        })
    })
}

The HTTP request is sent, and the code in the response block is executed. next() is executed, because it does load the page. Taking it out keeps the page from loading. But nothing in the next callback is executed. The console log is never shown. If I put next(vm => { console.log('hello') }) above the call to Vue.http, then there's no problem.

I apologize for the lack of repro, I'm crunching at work right now, but I thought I'd post anyway. I'll be back later with a repro if necessary.

[swannknani]

Hey @mattjneuber,

Try to upgrade vue to 2.0-rc.5 and give me a shoot if it works

https://jsfiddle.net/biquetto/sq0px5Lk/11/

[fnlctrl]

↑The example is working fine. (note: Vue's version doesn't matter, it works with all vue 2.0-rc versions.)

So I'm closing this issue as there wasn't a bug.

Please make sure to read the guideline before submitting an issue.
And specify the exact semver of vue and vue-router you are using.

[erguotou520]

I have this problem too.

Versions

{
  "vue": "2.0.0-rc.8",
  "vue-resource": "1.0.3",
  "vue-router": "^2.0.0-rc.7"
}

Repo

https://github.com/erguotou520/dashboard

Step to reproduce

1. Follow the readme to setup the project
2. Type anything in the login page to get logged(Ignore the chinese text)
3. Open the console, you can see the errorsCannot set property 'str' of undefined(…)

P.S.

While reload the page, the vm is correct, then nav to 云主机, the error still exist.
So when nav from another page and current page contains the beforeRouteEnter hook, the vm will be undefined.

[LinusBorg]

@erguotou520 could you kindly link to the source of a component with a beforeRoutEnter hook that shows this problem?

Your project is quite big for a reproduction ...

[erguotou520]

I start a demo project from vuejs-template/webpack(next version), and the repo is here https://github.com/erguotou520/vue2.0-demo, this goes ok.
So I compared the two project, and didn't get the main difference for the problem.
So cloud you take a look at the preview project https://github.com/erguotou520/dashboard? Just don't care about the language.

[dyu]

I can confirm this bug exists.
A snippet from a ts demo project

// workaround for current vue-router bug 
// that calls activate before the component is created
let $self: Hello|null = null
// the arg of this function is undefined when called
function activate(self: Hello) { if ($self || ($self = self)) Hello.activate($self) }
export default component({
    mounted(this: Hello) { if ($self === undefined) { Hello.activate($self = this) } },
    template: `
<div>
  <h3 @click="append('!')">{{ msg }}</h3>
</div>
`
}, Hello, activate/*, Hello.deactivate*/)

That activate function is called by a helper function:

function createFnActivateV2(fnActivate: (vm) => any): (route, redirect, next) => any {
    return function (route, redirect, next) {
        return next(fnActivate)
    }
}

[fnlctrl]

@dyu Then please provide a repro

[LinusBorg]

The activate hook was deprecated, are you sure this is a about vue-router 2.0?

[dyu]

@LinusBorg Yes I'm sure. That helper function will be assigned as a beforeRouteEnter property as you can see here.

@fnlctrl https://github.com/vuets/vuets/tree/master/docs/vue2 (I linked the specific file on initial post). Just npm i && npm run dev
Then to reproduce, replace:

, Hello, activate

with

, Hello, Hello.activate

So now without the workaround, run the demo and click the nav links.
You'll see the undefined error in the console.

[fnlctrl]

@dyu A repro actually means an isolated example of the least code required to reproduce the bug. Please don't send us complete projects as it won't help us find or confirm the bug.

[erguotou520]

It can be reproduce when change the routes settings to children routes.
The same repo above https://github.com/erguotou520/dashboard.

### Step
-

   npm i
   npm run dev
   # open localhost:8082

• Click to foo, then click to bar, you can see error on console Cannot set property 'msg' of undefined(…)

Router settings

{
  routes: [{
    path: '/',
    component: (resolve) => {
      require(['./components/CommonView.vue'], resolve)
    },
    children: [{
      path: 'foo',
      component: (resolve) => {
        require(['./components/Foo.vue'], resolve)
      }
    }, {
      path: 'bar',
      component: (resolve) => {
        require(['./components/Bar.vue'], resolve)
      }
    }]
  }]
}

[LinusBorg]

This link does not work: https://github.com/erguotou520/dashboard

I assume this is a private repo? I can't find a repo named "dashboard" oin the repo list of your profile, either.

[erguotou520]

@LinusBorg Sorry for name changed. Here is the new https://github.com/erguotou520/t2cloud-vmware

[erguotou520]

Resolved in [email protected]