quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.97k stars 3.52k forks source link

No loader is configured for ".vue" with app-vite v2 #17075

Closed MartinX3 closed 6 months ago

MartinX3 commented 7 months ago

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?

  1. quasar dev or quasar 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.

rstoenescu commented 6 months ago

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: