question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:10
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

67reactions
pbastowskicommented, Jul 11, 2019

@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

20reactions
MajesticPotatoecommented, Apr 2, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug Report: Cannot read property 'summary' of undefined
I had created a new admin user some time ago which was working fine until this morning, when I tried to login and...
Read more >
FortiOS Release Notes | FortiGate / FortiOS 7.0.1
Cannot read properties of undefined (reading 'spectrum_analysis') error appears when viewing downstream FortiGate from upstream FortiGate in WiFi dashboard.
Read more >
error in nexttick: "typeerror: cannot read properties ... - You.com
Error in mounted hook: "TypeError: Cannot read properties of undefined (reading ... I have following vue component in my vue application (only the...
Read more >
Cisco Bug: CSCwc26241 - ISE 3.2 displays the error: "TypeError
Cisco Bug: CSCwc26241 - ISE 3.2 displays the error: "TypeError: Cannot read properties of undefined (reading 'attr')"
Read more >
Frequently asked questions — Vuetify
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the ... How do I report a bug or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found