Uncaught TypeError: Cannot read property 'diff' of undefined

[andrewhl]

I'm using vue ^2.5.2 and vue-animated-list ^1.0.2.

I get the following stack trace:

Uncaught TypeError: Cannot read property 'diff' of undefined
    at install (vue-animated-list.js?be79:17)
    at Function.Vue.use (vue.esm.js?65d7:4753)
    at eval (main.js?1c90:13)
    at Object.<anonymous> (app.js:1364)
    at __webpack_require__ (app.js:660)
    at fn (app.js:86)
    at Object.<anonymous> (app.js:2523)
    at __webpack_require__ (app.js:660)
    at app.js:709
    at app.js:712

This is my component. It renders a simple ul of list items.

<template>
  <div class="activities-list">
    <h3 class="bd-title">Your activities ({{ activityCount }}):</h3>
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item"
            v-for="activity in activities"
            transition="activity"
            :key="activity.id">
          {{ activity.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapGetters } = createNamespacedHelpers("activities");

export default {
  computed: {
    ...mapState({
      activities: "activities"
    }),
    ...mapGetters(["activityCount"])
  }
};
</script>

<style scoped>
.item-move {
  /* applied to the element when moving */
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>

The data is in a vuex store. This is the state:

const initialActivities = [
  {
    id: 0,
    name: "No Activities"
  }
];

const state = {
  items: [
    { id: 1, name: "Activity 1" },
    { id: 2, name: "Activity 2" },
    { id: 3, name: "Activity 3" },
    { id: 4, name: "Activity 4" },
    { id: 5, name: "Activity 5" },
    { id: 6, name: "Activity 6" }
  ],
  activities: initialActivities
};

[azurons]

Yeap same error I think it's because of var vFor = Vue.directive('for') at line 16 in vue-animated-list.js An old issue on Vuejs indicate that it doesn't work anymore on Vue2 https://github.com/vuejs/vue/issues/4100

Well by reading the description of the repo

NOTE: this plugin is for Vue 1.x only. Vue 2.0 supports moving animations out of the box.

[creayt]

Evan, I hit this same issue today after being excited to use this. May want to mark as deprectated and close the repo since it seems to be incompatible w/ the current Vue. Thanks for all of your amazing work!