Vue-material: [MdSnackbar] Uncaught TypeError: Cannot read property '_vnode' of undefined

Created on 1 Sep 2018  路  6Comments  路  Source: vuematerial/vue-material

Steps to reproduce

<template>
  <md-content>
    <form @submit="submitForm">...</form>
    <md-snackbar md-position="center" :md-active.sync="loginMessage.status">
      <span>{{loginMessage.message}}</span>
    </md-snackbar>
  </md-content>
</template>
<script>
export default {
  name: 'login',
  data: () => ({
    loginMessage: {
      active: false,
      message: ''
    }
  }),
  methods: {
    submitForm () {
      this.loginMessage = { status: true, message: 'Please wait while we log you in...' }
      this.$store.dispatch('login', {
        phoneNumber: this.loginForm.phoneNumber,
        password: this.loginForm.password
      })
        .then((res) => {
          console.log(res)
          this.loginMessage = { status: true, message: 'Login successful!' }
          this.$router.replace('/dashboard')
        })
        .catch((err) => {
          console.error(err) 
        })
    }
  }
}
</script>

The 'Please wait while we log you in...' snackbar is displayed without any errors. Once login is successful, it is replaced with the 'Login successful!' text and user is redirected to the /dashboard page.

After getting redirected to /dashboard, the following error is printed in my console after 2-3 seconds:

Uncaught TypeError: Cannot read property '_vnode' of undefined
    at eval (vue-material.js?43f9:27001)
(anonymous) @ vue-material.js?43f9:27001
setTimeout (async)
(anonymous) @ vue-material.js?43f9:26998
createPromise @ vue-material.js?43f9:26989
createSnackbar @ vue-material.js?43f9:27027
mdActive @ vue-material.js?43f9:10507
run @ vue.runtime.esm.js?2b0e:3229
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754

Which browser?

Vue: v2.5.17
Vue Material: v1.0.0-beta-10.2
OS: macOS Mojave Public Beta 7
Browser: Google Chrome 68.0.3440.106 (Official Build) (64-bit)

What is expected?

No errors/warnings in console.

What is actually happening?

An errors in console as described above.

duplicated

Most helpful comment

this still exists.

All 6 comments

related to #1791

@dakshshah96 would you try it with dev branch?

Sorry for the dummy question but how do I select the dev branch from npm? I have the same issue using 1.0.0-beta-10.2

Nevermind, googled for it but still have the same issue.

this still exists.

Below is the cause for the bug. A simple fix is to call createPromise with correct arguments.

The bug:
In md-snackbar implementation, a call tocreatePromise() is made with an incorrect number and order of arguments.
The function createPromise(duration, persistent, context) is called ascreatePromise(duration, context).
So context within createPromise() is undefined and that causes an exception in context._vnode.componentInstance.initDestroy(true);

A snippet:
```var createSnackbar = exports.createSnackbar = function createSnackbar(duration, context) {
if (currentSnackbar) {
return destroySnackbar().then(function () {
return createPromise(duration, context);
});
}

return createPromise(duration, context);
};

function createPromise(duration, persistent, context) {
```

Duplicate of #1791

Was this page helpful?
0 / 5 - 0 ratings