Cannot read property 'dark' of undefined

[Huang-ChenGang]

I have this error:

vue.esm.js:1828 TypeError: Cannot read property 'dark' of undefined
at o.rootIsDark (themeable.js:73)
at Me.get (vue.esm.js:3265)
at Me.evaluate (vue.esm.js:3370)
at o.rootIsDark (vue.esm.js:3622)
at o.isDark (ThemeProvider.js:11)
at Me.get (vue.esm.js:3265)
at Me.evaluate (vue.esm.js:3370)
at o.isDark (vue.esm.js:3622)
at o. (vue.esm.js:496)
at Me.get (vue.esm.js:3265)
Yt @ vue.esm.js:1828
Ht @ vue.esm.js:1819
Vt @ vue.esm.js:1808
Me.get @ vue.esm.js:3268
Me @ vue.esm.js:3254
t.$watch @ vue.esm.js:3732
Ve @ vue.esm.js:3692
(anonymous) @ vue.esm.js:3674
Be @ vue.esm.js:3434
t._init @ vue.esm.js:4729
o @ vue.esm.js:4897
(anonymous) @ vue.esm.js:4400
init @ vue.esm.js:4231
(anonymous) @ vue.esm.js:5706
d @ vue.esm.js:5653
f @ vue.esm.js:5781
d @ vue.esm.js:5682
f @ vue.esm.js:5781
d @ vue.esm.js:5682
(anonymous) @ vue.esm.js:6205
t._update @ vue.esm.js:2774
Me.before @ vue.esm.js:2895
Me.get @ vue.esm.js:3265
Me @ vue.esm.js:3254
(anonymous) @ vue.esm.js:2902
pi.$mount @ vue.esm.js:8655
pi.$mount @ vue.esm.js:11070
init @ vue.esm.js:4235
(anonymous) @ vue.esm.js:5706
d @ vue.esm.js:5653
(anonymous) @ vue.esm.js:6205
t._update @ vue.esm.js:2774
Me.before @ vue.esm.js:2895
Me.get @ vue.esm.js:3265
Me @ vue.esm.js:3254
(anonymous) @ vue.esm.js:2902
pi.$mount @ vue.esm.js:8655
pi.$mount @ vue.esm.js:11070
(anonymous) @ vuetify-confirm.js:95
(anonymous) @ vuetify-confirm.js:87
t.(anonymous function) @ vuetify-confirm.js:103
back @ driverUpdate.vue:783
e @ vue.esm.js:2128
Rs.e._withTask.n._withTask @ vue.esm.js:1913
console.js:23 [Vuetify] Unable to locate target [data-app]

found in

--->

U @ console.js:23
initDetach @ detachable.js:89
mounted @ detachable.js:49
Se @ vue.esm.js:3034
insert @ vue.esm.js:4256
T @ vue.esm.js:6074
(anonymous) @ vue.esm.js:6293
t._update @ vue.esm.js:2774
Me.before @ vue.esm.js:2895
Me.get @ vue.esm.js:3265
Me @ vue.esm.js:3254
(anonymous) @ vue.esm.js:2902
pi.$mount @ vue.esm.js:8655
pi.$mount @ vue.esm.js:11070
(anonymous) @ vuetify-confirm.js:95
(anonymous) @ vuetify-confirm.js:87
t.(anonymous function) @ vuetify-confirm.js:103
back @ driverUpdate.vue:783
e @ vue.esm.js:2128
Rs.e._withTask.n._withTask @ vue.esm.js:1913
vue.esm.js:1828 TypeError: Cannot read property 'breakpoint' of undefined
at o.hideScroll (overlayable.js:163)
at o.hideScroll (VDialog.js:141)
at o.genOverlay (overlayable.js:36)
at o.show (VDialog.js:145)
at o. (VDialog.js:99)
at Array. (vue.esm.js:1925)
at MessagePort.Gt (vue.esm.js:1844)

[yariksav]

Hi, @Huang-ChenGang!
I suppose this bug is not generates from confirm dialog. Confirm dialog never use "dark" property.
If i google the message - github has same issues related with v-menu.
Can you provide more information, such as your code example of component where you are calling $confirm()

[Huang-ChenGang]

Hello, @yariksav
This is my code:

main.js
    import VuetifyConfirm from 'vuetify-confirm';
    Vue.use(VuetifyConfirm, {
        buttonTrueText: 'Accept',
        buttonFalseText: 'Discard',
        color: 'warning',
        icon: 'warning',
        title: 'Warning',
        width: 350,
        property: '$confirm'
    });

input.vue
    <div class="btn-clean" @click="reset">reset</div>
    reset: function () {
    let res = this.$confirm('Do you really want to exit?', {title: 'Warning'});
    	if (res) {
            console.log('aaa');
    	}
    }

and when I click the reset btn , the error happened

[Huang-ChenGang]

@yariksav
Should I import some style ?

[yariksav]

function $confirm always returns a Promise, therefore you should use async/await or .then() logic

  reset: async function () {
    let res = await this.$confirm('Do you really want to exit?', { title: 'Warning' });
      if (res) {
        console.log('aaa');
    	}
    }
  }

or

  reset: function () {
    this.$confirm('Do you really want to exit?', { title: 'Warning' }).then((res) => {
      if (res) {
        console.log('aaa')
      }
    })
  }

Should I import some style ?

vuetify-confirm doesn't have own styles

[Huang-ChenGang]

@yariksav
I use this
reset: function () {
this.$confirm('Do you really want to exit?', { title: 'Warning' }).then((res) => {
if (res) {
console.log('aaa')
}
})
}

has the same error
I think it happened when you get the light black background

[yariksav]

I've found message in your log:
console.js:23 [Vuetify] Unable to locate target [data-app]
As documented in vuetify, you should wrap your layout template to

<v-app>
...
</v-app>

2. I searched source code in vuetify mixin at o.rootIsDark (themeable.js:73)
   
   and code falled down at

return this.$vuetify.dark

Be sure this.$vuetify exist in your code. If it is undefined - seems you use vuetify incorrectly

[Huang-ChenGang]

@yariksav
Sorry, I've never used $vuetify before.
So what should I do now?
Must I use it in the $vuetify ?

[yariksav]

Sorry, I've never used $vuetify before.
So what should I do now?

But I cannot teach you how to use vuetify. Please read their official docs
something like

import Vuetify from 'vuetify'
Vue.use(Vuetify)

Must I use it in the $vuetify ?

No! After correct using vuetify it will inject $vuetify property into your vue components.
You should check is property this.$vuetify exists and is object. But I guess it ig undefined and is a reason of your crash
And vuetify-dialog need to use through $dialog property, as documented

[Huang-ChenGang]

It works now ! Thank you ! Thank you so mush !