Error Vue.js "Cannot read property 'props' of undefined"

Question

Did everything on gorails tutorial, but something wrong. error message in Chrome:

Uncaught TypeError: Cannot read property 'props' of undefined   
    at normalizeProps (vue.runtime.esm.js?ff9b:1291)   
    at mergeOptions (vue.runtime.esm.js?ff9b:1363)   
    at mergeOptions (vue.runtime.esm.js?ff9b:1372)   
    at Vue$3.Vue._init (vue.runtime.esm.js?ff9b:4268)   
    at new Vue$3 (vue.runtime.esm.js?ff9b:4384)  
    at HTMLDocument.eval (hello_vue.js?94ab:29)     
    at Object.t.dispatch (turbolinks.self-)   
    at r.t.Controller.r.notifyApplicationAfterPageLoad ...)   
    at r.t.Controller.r.pageLoaded (t...)   
    at turbolinks.self...  

Hello_vue file:

import Vue from 'vue'
import TurbolinksAdapter from "vue-turbolinks"
import VueResource from "vue-resource"

Vue.use(VueResource);

document.addEventListener('turbolinks:load', () => {

    Vue.http.headers.common["X-CSRF-Token"] = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

  var element = document.getElementById("team-form")

  if(element != null){

    var team = JSON.parse(element.dataset.team);
    var players_attributes = JSON.parse(element.dataset.playersAttributes);
    players_attributes.forEach(function(player){
        player._destroy = null  
    })
    team.players_attributes = players_attributes;

    var app = new Vue({
        el: element,
        mixins: [TurbolinksAdapter],
        data: function(){
            return { team: team }
        },
        methods: {
            addPlayer: function(){
                team.players_attributes.push({
                id: null,
                name: "",
                _destroy: null
                })
            }
        }
    });
  }
});

as I understand, an error in the initialization of the App object, but I can not understand in what exactly. I kind of did it right.

Answer 1

I've got this issue by misspelling a variable in the Vue mixins array. for example:

import file from '../folder/with/file'
export default: {
    mixins: [
        fil
    ]
}

should be

import file from '../folder/with/file'
export default: {
    mixins: [
        file
    ]
}

Answer 2

Probably late to the party and since this was the second answer google showed, thought this would help someone!

If anyone faced this because of provide/inject, I might probably have to do with vue2 / vue3. I read articles on provide/inject in vue3 and used it in my vue2 project ?????

I was using reactive in vue2 like:

import { reactive } from 'vue'

provide() {
  return {
    loadingState: new reactive(() => this.loadingState)
  }
}

Later changed it to:

provide() {
  return {
    loadingState: this.loadingState
  }
}