[Bug Report] Cannot read property 'dark' of undefined in VApp component

[vcastro45]

Versions and Environment

Vuetify: 2.0.0-alpha.11
Last working version: 1.5.8
Vue: 2.6.6
Browsers: Chrome 73.0.3683.86
OS: Windows 10

Steps to reproduce

Setup a new Vue Project and install Vuetify 2.0.0-alpha.11 with npm.

Expected Behavior

This must start properly

Actual Behavior

The server starts well with npm run serve but when I open the page in a browser, I can see this error in console:

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VApp>
       <App> at src/App.vue
         <Root>

Reproduction Link

https://github.com/vcastro45/IssueVuetify2

Other comments

My App.vue file looks like this:

<template>
  <div id="app">
    <v-app>
      <router-view/>
    </v-app>
  </div>
</template>

and main.ts looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/src/styles/main.sass'
import '@mdi/font/css/materialdesignicons.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify, {
  icons: {
    iconfont: 'mdi'
  }
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

PS

This is due to this line:

vuetify/packages/vuetify/src/components/VApp/VApp.ts

Line 37 in 2c785cc

return this.$vuetify.theme.dark

In fact, $vuetify.theme is undefined. just like $vuetify.breakpoints

[MajesticPotatoe]

We are not accepting bug reports for alpha builds.
Your particular issue has to do with not properly bootstrapping you app as laid out in alpha.5 patch notes.

[chaim0m]

Versions and Environment

Vuetify: 2.0.0-alpha.11
Last working version: 1.5.8
Vue: 2.6.6
Browsers: Chrome 73.0.3683.86
OS: Windows 10

Steps to reproduce

Setup a new Vue Project and install Vuetify 2.0.0-alpha.11 with npm.

Expected Behavior

This must start properly

Actual Behavior

The server starts well with npm run serve but when I open the page in a browser, I can see this error in console:

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VApp>
       <App> at src/App.vue
         <Root>

Reproduction Link

https://github.com/vcastro45/IssueVuetify2

Other comments

My App.vue file looks like this:

<template>
  <div id="app">
    <v-app>
      <router-view/>
    </v-app>
  </div>
</template>

and main.ts looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/src/styles/main.sass'
import '@mdi/font/css/materialdesignicons.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify, {
  icons: {
    iconfont: 'mdi'
  }
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

PS

This is due to this line:

vuetify/packages/vuetify/src/components/VApp/VApp.ts

Line 37 in 2c785cc

return this.$vuetify.theme.dark

In fact, $vuetify.theme is undefined. just like $vuetify.breakpoints

Having the same issue with the beta, did you ever figure this out?

[pbastowski]

@chaim0m I have just figured it out. Although, to be fair, this was already answered by @MajesticPotatoe in the first reply to this issue, where it states that you must properly instantiate Vuetify as explained in the Alpha 5 release notes. I did that and it works.

In summary do this:

const vuetifyOptions = { }
Vue.use(Vuetify)

new Vue({
  el: '#app',
  vuetify: new Vuetify(vuetifyOptions)
})

Also, here is a link to a working CodePen https://codepen.io/pbastowski/pen/Rzdqra?editors=1010

[garyo]

I'm doing that in my app (with Vuetify 2.0.6) and all is fine, but in my unit tests I use

let wrapper: Wrapper<MyComponent>
...
wrapper = mount(MyComponent, options)

and I get this error. Not sure how to adjust that for the new Vuetify.

[garyo]

Never mind, I figured it out -- just had to read the docs.

[Anubarak]

@garyo Could you show me what you did and where in the docs it is? I have the same issue and I already do

const vuetifyOptions = { }
Vue.use(Vuetify)

new Vue({
  el: '#app',
  vuetify: new Vuetify(vuetifyOptions)
})

[garyo]

Yes -- I followed the test/CustomCard.spec.ts example at https://vuetifyjs.com/en/getting-started/unit-testing.
The keys seem to be:
localVue.use(Vuetify)

beforeEach(() => {
    vuetify = new Vuetify(...)
  })

and

const wrapper = mount(CustomCard, {
      localVue,
      vuetify, // <<<< IMPORTANT
      propsData: {
        ...
      },
    })

[iliyaZelenko]

This error also occurs if you manually render the component:

const Component = Vue.extend(VueComponent)
const instance = new Component({
  vuetify, // <-- IMPORTANT
  propsData: {
    value: true
  }
})

instance.$mount()

[DamithaPerera]

@chaim0m I have just figured it out. Although, to be fair, this was already answered by @MajesticPotatoe in the first reply to this issue, where it states that you must properly instantiate Vuetify as explained in the Alpha 5 release notes. I did that and it works.

In summary do this:

const vuetifyOptions = { }
Vue.use(Vuetify)

new Vue({
  el: '#app',
  vuetify: new Vuetify(vuetifyOptions)
})

Also, here is a link to a working CodePen https://codepen.io/pbastowski/pen/Rzdqra?editors=1010

When i change like that i'm getting another error

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

[pbastowski]

@DamithaPerera

Do you have a repo or a link to the code that you can share?

Based on the error message it looks like you are creating text based templates and trying to use a version of Vue without a text-template compiler. However, without seeing the code I can't help you much more than this.

[DamithaPerera]

@pbastowski

the error occurs when i changed my vuetify version 1.5.18 to 2.2.28

This is my main.js file

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import VueLayers from "vuelayers";
import "vuelayers/lib/style.css"; 
import * as VueGoogleMaps from "vue2-google-maps";
import Chat from "vue-beautiful-chat";
import VueJWT from "vuejs-jwt";
import {HTTP, CREATEHTTP, AXIOS} from '@/http-common';

Vue.use(VueJWT);
Vue.use(Chat);
Vue.use(Vuetify);
Vue.use(require('vue-moment'));

window.Bus = new Vue();
window.token = localStorage.getItem("token");

window.HTTP = HTTP
window.CREATEHTTP = CREATEHTTP

window.axios = AXIOS

Vue.use(VueLayers);
Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyA28Qqwtb2jMFPRpve577GdZPXR6K1e--E",
    libraries: "places,drawing,visualization" 
  }
  
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

This is my App.vue file

<template>
  <!-- <div id="app"> -->
  <v-app id="app" :style="$vuetify.theme.dark ? ('::-webkit-scrollbar-thumb-black'):('::-webkit-scrollbar-thumb-black')">
    <v-layout v-if="showLayout" row>
      <v-layout row wrap>
        <v-flex>
          <Nav :userDetails="userDetails" :theme="theme" @ShrinkMenu="mini = $event" @ClickInbox="inboxMethod"
            @ClickAlert="alertMethod"
            @ClickSchedule="scheduleMethod"
            :inboxClick="inboxClick"
            :alertClick="alertClick"
            :scheduleClick="scheduleClick" />
          <v-layout row>
            <Sidebar :mini="mini" @themes="theme = $event" />

            <router-view :theme="theme" :style="'background-color:'+theme.background"></router-view>
            <v-layout align-start justify-end>
            <Notification
              :inboxClick="inboxClick"
              :theme="theme"
              :alertClick="alertClick"
              :scheduleClick="scheduleClick"
              
              @ClickInbox="inboxClick = $event"
              @ClickAlert="alertClick = $event"
              @ClickSchedule="scheduleClick = $event"
              style="position:absolute;"
            />
          </v-layout>
            <!-- <LeftSidebar :minis="minis" @themes="theme = $event" /> -->
          </v-layout>
        </v-flex>
      </v-layout>
    </v-layout>
    <v-flex xs12 :style="'background-color:'+theme.menubar" v-else class="pl-0 pt-0">
      <router-view :theme="theme"></router-view>
    </v-flex>
  </v-app>
  <!-- </div> -->
</template>

<script>
// import func from '../vue-temp/vue-editor-bridge';
import Nav from "@/components/NavComp";
import Sidebar from "@/components/SidebarComp";
import LeftSidebar from "@/components/LeftSidebarComp";
import Notification from "@/components/NotificationNavComp";

export default {
  data() {
    return {
      messageStyling: true,
      inboxClick: false,
      alertClick: false,
      scheduleClick: false,
      showLayout: localStorage.getItem("token") != null,
      theme: {},
      userDetails: [],
      mini: null,
      // minis: null,
      noAuthMenu: [
        // {name:"Signup", route:"Signup"},
        { name: "Login", route: "Login" }
      ],
      authMenu: [{ name: "Logout", route: "Logout" }],
      participants: [
        {
          id: "user1",
          name: "Matteo",
          imageUrl: "https://avatars3.githubusercontent.com/u/1915989?s=230&v=4"
        },
        {
          id: "user2",
          name: "Support",
          imageUrl:
            "https://avatars3.githubusercontent.com/u/37018832?s=200&v=4"
        }
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl:
        "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
      messageList: [
        { type: "text", author: `me`, data: { text: `Say yes!` } },
        { type: "text", author: `user1`, data: { text: `No.` } }
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: "", // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: "#4C4C4C",
          text: "#ffffff"
        },
        launcher: {
          bg: "#333333"
        },
        messageList: {
          bg: "#ffffff"
        },
        sentMessage: {
          bg: "#888888",
          text: "#ffffff"
        },
        receivedMessage: {
          bg: "#eaeaea",
          text: "#222222"
        },
        userInput: {
          bg: "#f4f7f9",
          text: "#565867"
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true
    };
  },
  components: {
    Nav,
    Sidebar,
    LeftSidebar,
    Notification
  },
  methods: {
    inboxMethod:function(e){
      this.inboxClick = e
    },
    alertMethod:function(e){
      this.alertClick = e
    },
    scheduleMethod:function(e){
      this.scheduleClick = e
    },
    sendMessage(text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen
          ? this.newMessagesCount
          : this.newMessagesCount + 1;
        this.onMessageWasSent({
          author: "support",
          type: "text",
          data: { text }
        });
      }
    },
    onMessageWasSent(message) {
      // called when the user sends a message
      this.messageList = [...this.messageList, message];
    },
    openChat() {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true;
      this.newMessagesCount = 0;
    },
    closeChat() {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false;
    },
    handleScrollToTop() {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType() {
      console.log("Emit typing event");
    },
    onLoggedIn: function() {
      this.menus = this.authMenu;
    },
    onLogout: function() {
      this.menus = this.noAuthMenu;
    }
  },

  created() {
    if (localStorage.getItem("theme") == "true") {
      this.$vuetify.theme.dark = true;
    } else if (localStorage.getItem("theme") == "false") {
      this.$vuetify.theme.dark = false;
    } else {
      localStorage.setItem("theme", "true");
    }
    Bus.$on("loggedIn", () => {
      this.onLoggedIn();
    });

    Bus.$on("logout", () => {
      this.onLogout();
    });

    this.userDetails = this.$jwt.decode(token);
  }
};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&display=swap');

html {
  font-family: "Rajdhani", sans-serif;
}
#app {
  background-color: #4c4c4c;
  font-family: "Rajdhani", sans-serif;
  /* user-select: none; supported by Chrome and Opera */
  /* -webkit-user-select: none; Safari */
  /* -khtml-user-select: none; Konqueror HTML */
  /* -moz-user-select: none; Firefox */
  /* -ms-user-select: none; Internet Explorer/Edge */
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
  background-color: #333333;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #7b7a7a;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb-black {
  border-radius: 10px;
  background-color: rgb(10, 6, 1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track-piece-black {
  background-color: #fff7f7;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.semiBold {
  font-weight: 600;
}
.sidebar {
  font-size: 16px;
  text-transform: uppercase;
}
.normalFontSize {
  font-size: 16px;
  line-height: 21px;
}
.Bold {
  font-weight: 700;
}
</style>

[nekosaur]

Please read the migration guide https://vuetifyjs.com/en/getting-started/releases-and-migrations/#migration-guide. If you need guidance please join us on discord