Uncaught TypeError: this.hammer is undefined

pchtsp commented 3 years ago

Thanks for the library! After installing I just copied the example:

<template>
  <timeline
    ref="timeline"
    :items="items"
    :groups="groups"
    :options="options"
  />
</template>

<script>
  import { Timeline } from 'vue-visjs'

  export default {
    name: 'GanttVis',
    components: {
      Timeline,
    },
    props: {
      experiment: {
        type: Object,
        required: true,
      },
      height: {
        type: Number,
        required: false,
        default: 500,
      },
    },
    data () {
      return {
        groups: [
          {
            id: 0,
            content: 'Group 1',
          },
        ],
        items: [
          {
            id: 0,
            group: 0,
            start: new Date(),
            content: 'Item 1',
          },
        ],
        options: {
          editable: true,
        },
      }
    },
    computed: {

    },
  }
</script>

And I get the following error when clicking the box:

Uncaught TypeError: this.hammer is undefined
    _repaintDragCenter vue-visjs.esm.js:19295
    _repaintDomAdditionals vue-visjs.esm.js:19407
    redraw vue-visjs.esm.js:19415
    redraw vue-visjs.esm.js:19415
    setData vue-visjs.esm.js:19262
    _onDrag vue-visjs.esm.js:20307
    onMoving vue-visjs.esm.js:19939
    _onDrag vue-visjs.esm.js:20307
    _onDrag vue-visjs.esm.js:20292
    propagatedHandler vue-visjs.esm.js:17323
    emit vue-visjs.esm.js:7971
    emit vue-visjs.esm.js:6874
    emit vue-visjs.esm.js:6879
    emit vue-visjs.esm.js:7298
    tryEmit vue-visjs.esm.js:6905
    recognize vue-visjs.esm.js:6958
    recognize vue-visjs.esm.js:7808
    inputHandler vue-visjs.esm.js:6001
    handler vue-visjs.esm.js:6224
    domHandler vue-visjs.esm.js:6076
    addEventListeners vue-visjs.esm.js:6026
    each vue-visjs.esm.js:5473
    addEventListeners vue-visjs.esm.js:6025
    init vue-visjs.esm.js:6101
    Input vue-visjs.esm.js:6080
    PointerEventInput vue-visjs.esm.js:6185
    createInputInstance vue-visjs.esm.js:6605
    Manager vue-visjs.esm.js:7715
    Hammer vue-visjs.esm.js:8176
    PropagatingHammer vue-visjs.esm.js:17154
    _create vue-visjs.esm.js:18533
    Timeline vue-visjs.esm.js:20878
    mounted vue-visjs.esm.js:21941
    VueJS 18
    init vue-router.esm.js:2989
    init vue-router.esm.js:2988
    updateRoute vue-router.esm.js:2409
    transitionTo vue-router.esm.js:2263
    confirmTransition vue-router.esm.js:2397
    step vue-router.esm.js:2001
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2392
    step vue-router.esm.js:2001
    step vue-router.esm.js:2005
    iterator vue-router.esm.js:2379
    resolve vue-router.esm.js:2127
    once vue-router.esm.js:2203
    promise callback*resolveAsyncComponents/</< vue-router.esm.js:2150
    flatMapComponents vue-router.esm.js:2171
    flatMapComponents vue-router.esm.js:2171
    flatMapComponents vue-router.esm.js:2170
    resolveAsyncComponents vue-router.esm.js:2106
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    step vue-router.esm.js:2008
    step vue-router.esm.js:2005
    iterator vue-router.esm.js:2379
    <anonymous> router.js:63
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2387
    transitionTo vue-router.esm.js:2260
    push vue-router.esm.js:2704
    iterator vue-router.esm.js:2375
    <anonymous> router.js:59
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2387
    transitionTo vue-router.esm.js:2260
    push vue-router.esm.js:2704

pchtsp commented 3 years ago

As advised in https://stackoverflow.com/questions/67080908/vis-timeline-7-and-angular-11 I manually installed vis-timeline at version 7.4.4 (I had to uninstall vue-visjs because it requires 7.4.8 for some reason). I'm now using vis-timeline directly.

Maybe a possible workaround would be to change the dependency on vis-timeline from "^7.4.8" to "^7.4.4" in order to install an older version of vis-timeline? https://github.com/sjmallon/vue-visjs/blob/d11b710a6625c52063c36700f23ae7148b36e367/package.json#L41-L43

alexdeia commented 2 years ago

I found an error in the code, I will prepare a PR

benincasantonio commented 2 years ago

Hi, thank you very much for the hard work with the library! I have a similar problem, as described above. When will this problem be fixed? Can I help in some way? Thank you so much for your attention.

alexdeia commented 2 years ago

@benincasantonio I guess will be quicker if you can just create a fork and update visjs dependencies. I noticed this here https://github.com/sjmallon/vue-visjs/pull/27

sjmallon / vue-visjs

Uncaught TypeError: this.hammer is undefined #16