kieuminhcanh / vuetify-notifier

21 stars 2 forks source link

Could not find defaults instance #9

Open fanonwue opened 1 month ago

fanonwue commented 1 month ago

Hi,

after updating to 1.1.1 and updating my function calls, Toasts (and other types probably) aren't showing up anymore. The error in console I am getting is Error: [Vuetify] Could not find defaults instance alongside some warnings before that

[Vue warn]: injection "Symbol(vuetify:defaults)" not found. 
  at <VLayout> 
  at <NotifierToast status="error" text="Error accessing API server: Network Error" options= 
Object { defaultColor: "primary", defaultIcon: "", successIcon: "$success", infoIcon: "$info", warningIcon: "$warning", errorIcon: "$warning", closeIcon: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z", toastProps: {…}, hideSubmit: true }
  ... >

[Vue warn]: Unhandled error during execution of setup function 
  at <VLayout> 
  at <NotifierToast status="error" text="Error accessing API server: Network Error" options= 
Object { defaultColor: "primary", defaultIcon: "", successIcon: "$success", infoIcon: "$info", warningIcon: "$warning", errorIcon: "$warning", closeIcon: "mdi-close", toastProps: {…}, hideSubmit: true }
  ... >

The rest of the Vuetify stuff works fine, and the older version of this project worked perfectly fine as well.

Here is my Vuetify setup:

// Styles
import 'vuetify/styles'

// Vuetify
import { createVuetify } from "vuetify";
import {flagIcons} from './flag-icon-set'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import { vahleLight, vahleDark } from "@/lib/plugins/vuetify-vahle-theme";
import { defaultInputStyle } from "@/lib/config"

// Required components for notifier
import { VBtn, VSnackbar, VDialog, VOverlay, VDefaultsProvider } from 'vuetify/components'

// Other components
import {
    VForm, VDivider, VCard, VCardText, VCardActions, VRow, VToolbar, VIcon,
    VCol, VTextarea, VTextField, VSpacer, VAutocomplete
} from "vuetify/components";

import * as directives from 'vuetify/directives'

const browserPrefersDarkMode = () => {
    if (window) return window.matchMedia('(prefers-color-scheme: dark)').matches
    return false
}

const vuetify = createVuetify({
    components: {
        VBtn, VSnackbar, VDefaultsProvider, VForm, VDivider, VCard, VCardText, VRow, VToolbar, VIcon, VCardActions,
        VCol, VTextarea, VTextField, VSpacer, VDialog, VAutocomplete, VOverlay
    },
    directives,
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi,
            flags: flagIcons
        }
    },

    theme: {
        defaultTheme: browserPrefersDarkMode() ? 'vahleDark' : 'vahleLight',
        themes: { vahleLight, vahleDark }
    },

    defaults: {
        VTextField: {
            variant: defaultInputStyle
        },
        VTextarea: {
            variant: defaultInputStyle
        },
        VSelect: {
            variant: defaultInputStyle
        },
        VFileInput: {
            variant: defaultInputStyle
        },
        VAutocomplete: {
            variant: defaultInputStyle
        }
    }
})

export default vuetify

and this is my main.ts

import "./lib/date.extensions"
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import vuetify from '@/lib/plugins/vuetify'
import i18n from "@/lib/plugins/vue-i18n";
import { loadFonts } from '@/lib/plugins/webfontloader'
import pinia from "@/lib/plugins/pinia";
import { VuetifyNotifier } from 'vuetify-notifier'
import {mdiClose} from "@mdi/js";

import './styles/main.scss'

loadFonts()

export const app = createApp(App)
    .use(pinia)
    .use(router)
    .use(vuetify)
    .use(i18n)
    .use(VuetifyNotifier, {
        default: {
            defaultColor: 'primary', //default color for all notifications
            closeIcon: mdiClose, //default close icon for component
        }
    })

app.mount("#app")

I honestly have no idea where to start, so maybe someone can help me here?

danieljbrennan commented 3 weeks ago

I have exactly the same issue