Repository navigation
Error: Cannot read property "add" of undefined #19
Description
Hello, I'm trying a very simple test of vue-shepherd and I'm getting the following error after clicking on the first "Next" button associated with first Step ('Welcome to the JMRL Staff-Portal Tour.'). Part of the issue is when this is still available as the main Vue prototype, but I don't think that's it (and the same problem occurs if I use this.$el or that.$el in the first Step.
Console code and code for App.vue follows (I've scrubbed some mapActions from the <script> section because they aren't pertinent.
Uncaught TypeError: Cannot read property 'add' of undefined
at Step._show (shepherd.esm.js:5063)
at Step.show (shepherd.esm.js:4891)
at Tour.show (shepherd.esm.js:5724)
at Tour.next (shepherd.esm.js:5671)
at HTMLButtonElement.<anonymous> (shepherd.esm.js:2670)
_show @ shepherd.esm.js:5063
show @ shepherd.esm.js:4891
show @ shepherd.esm.js:5724
next @ shepherd.esm.js:5671
(anonymous) @ shepherd.esm.js:2670/**
App.vue
*/
<template>
<div>
<TheNavbar ref="app-navbar-id" />
<router-view />
</div>
</template>
<script>
import { TheNavbar } from '@/components/Nav/index.js'
import { mapActions } from 'vuex'
export default {
name: 'App',
data() {
return {}
},
components: {
TheNavbar,
},
async created() {
console.log('App created', new Date().getTime())
try {
debugger
await this.loadLoginStates()
debugger
} catch (e) {
console.log(e)
}
},
mounted() {
console.log('App mounted', new Date().getTime())
let that = this
this.$nextTick(() => {
const tour = this.$shepherd({
defaultStepOptions: {
classes: 'shadow-md bg-purple-dark',
scrollTo: true,
},
useModalOverlay: true,
})
tour.addSteps([
{
attachTo: { element: this.$el, on: 'top' },
classes: 'example-step-extra-class',
buttons: [{ text: 'Next', action: tour.next }],
text: 'Welcome to the JMRL Staff-Portal Tour.',
},
{
attachTo: { element: that.$refs['app-navbar-id'], on: 'bottom' },
classes: 'example-step-extra-class',
buttons: [
{
text: 'Next',
action() {
tour.next()
return this.$router.push({ name: 'hr-leave-user' })
},
},
],
text: 'And continue with the tour!',
},
])
tour.start()
})
}
}
</script>
Activity
RobbieTheWagner commentedon Mar 8, 2021
@jmrlib from the stack trace it looks like this line https://github.com/shipshapecode/shepherd/blob/master/src/js/step.js#L395
Basically,
this.$elorthat.$refs['app-navbar-id']seem to be undefined, so it is trying to add classes to a classList of an undefined element.