No loader is configured for ".vue" with app-vite v2
MartinX3 opened this issue · comments
What happened?
Since using app-vite v2 I get No loader is configured for ".vue"
when I want to import the routes.ts
from vue-router
to generate the sitemap via the vite-plugin-sitemap
plugin
With app-vite v1 I was using a quasar.config.js hack to load a quasar.config.ts where it worked flawless.
What did you expect to happen?
It imports the routes.ts
to generate the sitemap.
Reproduction URL
https://stackblitz.com/~/github.com/MartinX3/quasar-app-vite-vue-loader-test
How to reproduce?
quasar dev
orquasar build
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)
Platforms/Browsers
Chrome
Quasar info output
Operating System - Linux(6.8.2-zen2-1-zen) - linux/x64
NodeJs - 21.7.1
Global packages
NPM - Not installed
yarn - 1.22.22
@quasar/cli - 2.4.0
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.0.0-beta.5 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.3.0
pinia - Not installed
vuex - Not installed
vite - 5.2.7 -- Native-ESM powered web dev build tool
vite-plugin-checker - Not installed
eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
typescript - 5.4.3 -- TypeScript is a language for application scale JavaScript development
workbox-build - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*
Relevant log output
App • Using quasar.config.ts in "ts" format
✘ [ERROR] No loader is configured for ".vue" files: src/pages/ErrorNotFound.vue
src/router/routes.ts:14:28:
14 │ component: () => import('pages/ErrorNotFound.vue'),
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".vue" files: src/layouts/MainLayout.vue
src/router/routes.ts:6:28:
6 │ component: () => import('layouts/MainLayout.vue'),
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
✘ [ERROR] No loader is configured for ".vue" files: src/pages/IndexPage.vue
src/router/routes.ts:7:51:
7 │ children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
╵ ~~~~~~~~~~~~~~~~~~~~~
App • ⚠️ FAIL Could not compile the quasar.config file because it has errors.
Additional context
If there is a better way to generate the sitemap I would be thankful.
Hi,
The error is absolutely expected. You are importing a UI file in a Node context (quasar.config file).
However, I've pushed a shimming mechanism for .vue files since I do see a benefit in your use-case. But like I said, please be aware of the fact that you are in a Node context while handling the quasar.config file. Such imported files do NOT go through the same pipeline as the UI code.
The new feature will be available in:
- q/app-vite v2.0.0-beta.11
- q/app-webpack v4.0.0-beta.12