Vuetify Could not find defaults instance

Question

So, after running npm run build that contains: vite build.

With: "vuetify": "^3.0.0-beta.4" and "vue": "^3.2.31"

The built application gives this rather vague error:

Error: [Vuetify] Could not find defaults instance

Honestly I don't have a clue what this error means. Did anyone see this before? Or does anyone know what the "defaults instance" is?

This is the main.ts file:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
import { createPinia } from "pinia";

loadFonts();

const pinia = createPinia();

createApp(App)
  .use(router)
  .use(vuetify)
  .use(pinia)
  .mount('#app');

This is inside plugins/vuetify.ts

// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '../../node_modules/front-end-component-library/dist/style.css';

// Vuetify
import '@fortawesome/fontawesome-free/css/all.css';
import { createVuetify } from 'vuetify';
import {aliases, fa} from 'vuetify/lib/iconsets/fa';
import {mdi} from 'vuetify/lib/iconsets/mdi';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
    components,
    directives,
    theme: {
        themes: {
            JLightTheme: {
                dark: false,
                colors: {
                    background: '#e3e4e0',
                    surface: '#FFFFFF',
                    primary: '#5A392D',
                    'primary-darken-1': '#3700B3',
                    secondary: '#4D5A58',
                    'secondary-darken-1': '#018786',
                    accent: '#e3e4e0',
                    error: '#B00020',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00',
                }
            },
        }
    },
    icons: {
        defaultSet: 'fa',
        aliases,
        sets: {
            fa,
            mdi
        }
    }
});

Babble

please share the main.js file – Forta

Sure, done that :) – Babble

Vuetify 3 is currently in beta. This means it's not stable and its behaviour can change from day to day. Please report any issues using Support > File a bug report on their website. Why? Because on Stack Overflow you're more likely to get answers from people who used Vuetify (e.g: v2) a lot, rather than people actively involved in developing the new version (e.g: v3). – Uhland

Yeah I know. We took a chance since they promised to release a long while ago. I guess we will have to see then. Thanks. If anyone has this issue before, I would still be very interested if a solution comes up. – Babble

Try to comment the options of theme – Forta

Answer 1

It took me forever to find the solution: IconOptions type is wrong. Replace defaultSet with defaults in the icon options:

icons: {
  defaults: 'fa',
  aliases,
  sets: { fa, mdi }
}

Ruttish

I have the same issue, it helps by not having this error, but the icons don't work as it doesn't add any classes to icon element. – Nantucket

Did you add the required FontAwesome imports? – Ruttish

I fixed the issue by not using vite-plugin-vuetify as it's still buggy at the moment so I have to import components manually from vuetify/components. It has nothing to do with icons. – Nantucket

In my case I stopped using @vue/compat, and that worked too (instead of removing vite-plugin-vuetify) – Extinguish

Mine was just miss configured. Found the right config by checking this working example. Especialy ./vite.config.ts and ./src/main.ts – Smashup

Answer 2

I had the same error when trying to configure a unit test using Vitest and Vuetify.

I'll leave my solution here in case others come here too. I was able to solve my error by creating a new vuetify plugin in my test case file.

// test/helloworld.spec.ts
import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import HelloWorld from '../../src/components/HelloWorld.vue'

const vuetify = createVuetify({
  components,
  directives,
})

global.ResizeObserver = require('resize-observer-polyfill')

test('displays message', () => {
  const wrapper = mount({
    template: '<v-layout><hello-world></hello-world></v-layout>'
  }, {
    props: {},
    global: {
      components: {
        HelloWorld,
      },
      plugins: [vuetify],
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Components')
})

Aquamarine

Answer 3

I had the issue when implementing GTM in Nuxt3 using Vuetify using https://github.com/zadigetvoltaire/nuxt-gtm plugin with AW-* tag name.

Submitted an issue for that repo, and let's see if/when it'll be fixed: https://github.com/zadigetvoltaire/nuxt-gtm/issues/15. Potentially, it could be a solution for some of you.

Boroughenglish