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
        }
    }
});

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 }
}