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]

1) 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 !