DevonDahon
DevonDahon

Reputation: 8350

How to set Vuetify 3 in a Wails project to fix "Could not find defaults instance"?

I have created a Wails project:

wails init -n myproject -t vue-ts
cd myproject

Then I installed Vuetify with:

npm install vuetify@^3.1.5 --save

Then, I've set Vuetify by replacing the content of frontend/src/main.ts:

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

with:

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

createApp(App).use(vuetify).mount('#app')

To test it, I have just add a <v-btn>FOO</v-btn> in frontend/src/components/HelloWorld.vue but I'm getting the following error in the browser console:

[Vue warn]: inject() can only be used inside setup() or functional components.
warn2 @ chunk-ICSI7ZZO.js?v=7b367156:1172
inject @ chunk-ICSI7ZZO.js?v=7b367156:1641
useDefaults @ chunk-ICSI7ZZO.js?v=7b367156:5015
setup @ chunk-ICSI7ZZO.js?v=7b367156:5090
callWithErrorHandling @ vue.js?v=7b367156:1415
setupStatefulComponent @ vue.js?v=7b367156:6836
setupComponent @ vue.js?v=7b367156:6799
mountComponent @ vue.js?v=7b367156:5583
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
mountChildren @ vue.js?v=7b367156:5424
mountElement @ vue.js?v=7b367156:5356
processElement @ vue.js?v=7b367156:5343
patch @ vue.js?v=7b367156:5277
mountChildren @ vue.js?v=7b367156:5424
mountElement @ vue.js?v=7b367156:5356
processElement @ vue.js?v=7b367156:5343
patch @ vue.js?v=7b367156:5277
componentUpdateFn @ vue.js?v=7b367156:5674
run @ vue.js?v=7b367156:396
instance.update @ vue.js?v=7b367156:5763
setupRenderEffect @ vue.js?v=7b367156:5771
mountComponent @ vue.js?v=7b367156:5596
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
mountChildren @ vue.js?v=7b367156:5424
processFragment @ vue.js?v=7b367156:5541
patch @ vue.js?v=7b367156:5273
componentUpdateFn @ vue.js?v=7b367156:5674
run @ vue.js?v=7b367156:396
instance.update @ vue.js?v=7b367156:5763
setupRenderEffect @ vue.js?v=7b367156:5771
mountComponent @ vue.js?v=7b367156:5596
processComponent @ vue.js?v=7b367156:5561
patch @ vue.js?v=7b367156:5279
render2 @ vue.js?v=7b367156:6138
mount @ vue.js?v=7b367156:4791
app.mount @ vue.js?v=7b367156:8688
(anonymous) @ main.ts:11
vue.js?v=7b367156:1303 [Vue warn]: Unhandled error during execution of setup function 
  at <VBtn> 
  at <HelloWorld> 
  at <App>
Uncaught Error: [Vuetify] Could not find defaults instance
    at useDefaults (chunk-ICSI7ZZO.js?v=7b367156:5017:11)
    at setup (chunk-ICSI7ZZO.js?v=7b367156:5090:24)
    at callWithErrorHandling (vue.js?v=7b367156:1415:18)
    at setupStatefulComponent (vue.js?v=7b367156:6836:25)
    at setupComponent (vue.js?v=7b367156:6799:36)
    at mountComponent (vue.js?v=7b367156:5583:7)
    at processComponent (vue.js?v=7b367156:5561:9)
    at patch (vue.js?v=7b367156:5279:11)
    at mountChildren (vue.js?v=7b367156:5424:7)
    at mountElement (vue.js?v=7b367156:5356:7)

How should I fix it ?

Upvotes: 2

Views: 349

Answers (0)

Related Questions