Vite plugins breaks views (Failed to resolve component)

[andyslack]

Hi Guys,

I hope someone can help.

I am struggling to 'theme' my Quasar application using Vite.

If I don't add the quasar plugin to my vite.config.ts file then it loads the application correctly but obviously uses the default Quasar theme, here you see it working:

However as soon as I add the plugin e.g.

plugins: [
    vue({
        template: {
            transformAssetUrls,
        },
    }),
    quasar({
        sassVariables: 'src/quasar.variables.sass',
    }),
],

The theme starts working but I get the following errors and my components stop showing:

I have tried adding all variations of autoImportComponentCase but it did not help

Any guidance would be appreciated.

Here is my package.json dependancies incase it helps:

"@babel/types": "^7.20.5",
"@bugsnag/js": "^7.18.0",
"@fortawesome/fontawesome-pro": "^6.2.1",
"@juicyllama/utils": "^0.0.11",
"@quasar/extras": "^1.15.6",
"@quasar/vite-plugin": "^1.2.3",
"@types/node": "^18.11.17",
"@typescript-eslint/eslint-plugin": "^4.28.2",
"@typescript-eslint/parser": "^4.28.2",
"@vitejs/plugin-vue": "^3.2.0",
"@vue/compiler-sfc": "^3.2.6",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/tsconfig": "^0.1.3",
"axios": "^1.2.1",
"boxicons": "^2.1.4",
"class-validator": "^0.13.2",
"dotenv": "^16.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-vue": "^7.13.0",
"javascript-time-ago": "^2.5.9",
"pinia": "^2.0.27",
"prettier": "^2.8.0",
"pusher-js": "^7.6.0",
"quasar": "^2.10.2",
"release-it": "^15.5.0",
"sass": "^1.56.1",
"typescript": "^4.9.3",
"vite": "^3.2.4",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vue-tsc": "^0.39.5",
"vue3-otp-input": "^0.3.6"

Here is the Vue component file:

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { UserStore } from '../../store/user'
import AuthActions from '@/components/auth/Actions.vue'
import { useRouter } from 'vue-router'
import type { AuthFormState } from '../../helpers/validators'
import { validatePassword, validateEmail, isPasswordValid } from '../../helpers/validators'
import { selected_account } from '../../store/account'

export default defineComponent({
	name: 'JLLogin',
	methods: { isPasswordValid },
	components: { AuthActions },
	setup: function () {
		const userStore = UserStore()
		const router = useRouter()

		const state = reactive(<AuthFormState>{
			email: '',
			password: {
				value: '',
				valid: {
					length: false,
					capital: false,
					number: false,
					symbol: false,
				},
				validated: false,
			},
		})

		const loading = ref(false)

		async function login(state: AuthFormState) {
			loading.value = true
			state.email = state.email.trim()
			state.password.value = state.password.value.trim()
			const user = await userStore.login({ email: state.email, password: state.password.value })

			if (user?.accounts?.length === 1) {
				selected_account.set(user.accounts[0])
			}

			if (user?.user_id) {
				await router.push('/dashboard')
			}
			loading.value = false
		}

		return {
			userStore,
			state,
			validateEmail,
			validatePassword,
			login,
			loading,
		}
	},
})
</script>

<template>
	<q-form autofocus @submit="login(state)">
		<q-card-section>
			<div class="text-h6">Login</div>
		</q-card-section>
		<q-separator inset />
		<q-card-section class="column q-gutter-md">
			<q-input
				name="email"
				label="Email *"
				v-model="state.email"
				:rules="[(val) => validateEmail(val) || 'Must be a valid email.']"
				autocomplete="email"
			></q-input>
			<q-input
				name="password"
				label="Password *"
				v-model="state.password.value"
				type="password"
				:rules="[(val) => isPasswordValid(state.password) || 'Password must meet all criteria.']"
				autocomplete="password"
			>
			</q-input>
		</q-card-section>
		<AuthActions submit_label="Login" :loading="loading"></AuthActions>
	</q-form>
</template>

<style scoped></style>

[yusufkandemir]

The behavior should actually be the reverse, if you don't have the Quasar plugin, it technically can't resolve the components, it you add it, it should be able to resolve the components. I'd suggest making sure you are explaining the situation clearly and correctly. If you are really sure that you've explained the behavior correctly, then there might be some cache issues. I'd recommend removing node_modules and reinstalling the dependencies. If that doesn't work, then try removing both node_modules and the lock file, then reinstall the deps. If that didn't work as well, then you should provide a reproduction for further help.

Also, what do you mean by 'theme', do you have some CSS files somewhere? Where and how do you import them?

[andyslack]

Thanks for you replay @yusufkandemir

The above explanation is 100% what I am experiencing, however, your answer does make sense, but it's not what I am experiencing.

I tried a full restart as suggested, deleting node_modules and the lock file etc but when I reinstall I get the same issues.

Here is the full code repo: https://github.com/juicyllama1/juicyllama-app

It would be amazing if you could take a look at it when you get a moment.

When I refer to 'theme' I am simply referring to the src/quasar.variables.sass file being loaded in.

[yusufkandemir]

I am not sure what's going on inside your package @juicyllama/quasar, but when I upgraded it to 0.0.36 it started working.

Btw, you don't need the @vue/compiler-sfc package in Vue 3.2.13+, uninstall it to avoid problems in the future.

[andyslack]

Thanks @yusufkandemir you are correct, I must have fixed this when updating something else.

I think it was todo with using process.env not being available and therefore hardcoding some values in my parent package @juicyllama/quasar seems to be working well now :)