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

vcastro45 commented 5 years ago

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: https://github.com/vuetifyjs/vuetify/blob/2c785cc7c5b7731a0b7ecbc7bca7d7cea4b57bca/packages/vuetify/src/components/VApp/VApp.ts#L37 In fact, $vuetify.theme is undefined. just like $vuetify.breakpoints

MajesticPotatoe commented 5 years ago

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 commented 5 years ago

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: https://github.com/vuetifyjs/vuetify/blob/2c785cc7c5b7731a0b7ecbc7bca7d7cea4b57bca/packages/vuetify/src/components/VApp/VApp.ts#L37

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

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

pbastowski commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

Anubarak commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

vuetifyjs / vuetify