shipshapecode / shipshapecode/vue-shepherd

Error: Cannot read property "add" of undefined

Open
#19 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
Vue
Stars
340
Forks
26
PR merge metrics
No merged PRs in 30d

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>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with App.vue and reproduce the failure when the first tour step's Next button calls tour.next. Then inspect the Step._show, Step.show, and Tour.next locations referenced in shepherd.esm.js, focusing on the first step's attachTo element and the navbar reference. Done means the tour advances past the first step without the undefined-property error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.