Trying to build Quasar/Vite app #16568

ivanabrkic · 2023-11-09T21:02:42Z

What happened?

I am trying to build Quasar/Vite SPA app using Import meta url, and I am getting very weird error.

Everything is working in dev mode, all images, including dynamic ones, are resolving, but build is failing.

I'm attaching demo of this issue. If you were to avoid using ${} for some reason build passes on this example, but I tried to do that in my app and it doesn't work. There's definitely some issue with Quasar/Vite dynamic assets, I'm just curious what's causing the bug? I can always switch to public folder, but I wanted to use src/assets.

What did you expect to happen?

I expect build to pass. I would like to know if anyone has same issues? And if there's some magic config for handling this?

Reproduction URL

https://stackblitz.com/edit/quasarframework-bpl63d?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

In template

<q-icon>
    <img :src="getURL(someURL)"/>
</q-icon>

In setup script

const getURL = (someURL) => {
    return new URL(`/src/${someURL}`, import.meta.url);
};

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

No response

Quasar info output

Operating System - Linux(6.5.6-76060506-generic) - linux/x64
NodeJs - 20.9.0

Global packages
  NPM - 10.1.0
  yarn - 1.22.19
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.13.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.7 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.7 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.52.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - df3c54e7f933
  eth0 - 172.24.0.12

Relevant log output

[vite:css] This file is already being loaded.
  ╷
1 │ @import 'src/css/quasar.variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/css/quasar.variables.scss 1:9  root stylesheet
file: /app/frontend/src/css/quasar.variables.scss?used
Error: This file is already being loaded.
  ╷
1 │ @import 'src/css/quasar.variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/css/quasar.variables.scss 1:9  root stylesheet
/app/frontend/node_modules/sass/sass.dart.js:13172
      var error = new self.Error(message);
                  ^

Error: This file is already being loaded.
  ╷
1 │ @import 'src/css/quasar.variables.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/css/quasar.variables.scss 1:9  root stylesheet
    at Object._newRenderError (/app/frontend/node_modules/sass/sass.dart.js:13172:19)
    at Object._wrapException (/app/frontend/node_modules/sass/sass.dart.js:12998:16)
    at _render_closure1.call$2 (/app/frontend/node_modules/sass/sass.dart.js:81115:21)
    at _RootZone.runBinary$3$3 (/app/frontend/node_modules/sass/sass.dart.js:27260:18)
    at _FutureListener.handleError$1 (/app/frontend/node_modules/sass/sass.dart.js:25816:19)
    at _Future__propagateToListeners_handleError.call$0 (/app/frontend/node_modules/sass/sass.dart.js:26114:49)
    at Object._Future__propagateToListeners (/app/frontend/node_modules/sass/sass.dart.js:4536:77)
    at _Future._completeError$2 (/app/frontend/node_modules/sass/sass.dart.js:25946:9)
    at _AsyncAwaitCompleter.completeError$2 (/app/frontend/node_modules/sass/sass.dart.js:25600:12)
    at Object._asyncRethrow (/app/frontend/node_modules/sass/sass.dart.js:4335:17) {
  formatted: 'Error: This file is already being loaded.\n' +
    '  ╷\n' +
    "1 │ @import 'src/css/quasar.variables.scss';\n" +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src/css/quasar.variables.scss 1:9  root stylesheet',
  line: 1,
  column: 9,
  file: '/app/frontend/src/css/quasar.variables.scss',
  status: 1,
  id: '/app/frontend/src/css/quasar.variables.scss?used',
  frame: 'Error: This file is already being loaded.\n' +
    '  ╷\n' +
    "1 │ @import 'src/css/quasar.variables.scss';\n" +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src/css/quasar.variables.scss 1:9  root stylesheet',
  code: 'PLUGIN_ERROR',
  plugin: 'vite:css',
  hook: 'transform',
  watchFiles: [
    '/app/frontend/index.html',
    '/app/frontend/.quasar/client-entry.js',
    '/app/frontend/node_modules/vite/package.json',
    '/app/frontend/node_modules/vue/package.json',
    '/app/frontend/node_modules/@quasar/extras/package.json',
    '/app/frontend/node_modules/quasar/package.json',
    '/app/frontend/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    '/app/frontend/node_modules/@quasar/extras/fontawesome-v6/fontawesome-v6.css',
    '/app/frontend/node_modules/@quasar/extras/roboto-font/roboto-font.css',
    '/app/frontend/node_modules/@quasar/extras/material-icons/material-icons.css',
    '/app/frontend/node_modules/quasar/dist/quasar.sass',
    '/app/frontend/.quasar/app.js',
    '/app/frontend/.quasar/quasar-user-options.js',
    '/app/frontend/src/css/app.scss',
    '/app/frontend/src/boot/apexcharts.ts',
    '/app/frontend/src/boot/pinia.ts',
    '/app/frontend/src/boot/error-handling.ts',
    '/app/frontend/src/boot/i18n.ts',
    '/app/frontend/src/boot/axios.ts',
    '/app/frontend/src/boot/cookies.ts',
    'vite/preload-helper',
    '/app/frontend/node_modules/@vue/runtime-dom/package.json',
    '/app/frontend/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    '/app/frontend/node_modules/quasar/src/vue-plugin.js',
    '/app/frontend/src/App.vue',
    '/app/frontend/src/stores/index.ts',
    '/app/frontend/src/router/index.ts',
    '/app/frontend/node_modules/quasar/src/plugins/Loading.js',
    '/app/frontend/node_modules/quasar/src/plugins/Notify.js',
    '/app/frontend/node_modules/@vue/runtime-core/package.json',
    '/app/frontend/node_modules/@vue/shared/package.json',
    '/app/frontend/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
    '/app/frontend/node_modules/@vue/shared/dist/shared.esm-bundler.js',
    '/app/frontend/node_modules/quasar/src/install-quasar.js',
    '/app/frontend/node_modules/quasar/src/lang.js',
    '/app/frontend/node_modules/quasar/src/icon-set.js',
    '/app/frontend/node_modules/quasar/src/components/avatar/QAvatar.js',
    '/app/frontend/node_modules/quasar/src/components/icon/QIcon.js',
    '/app/frontend/node_modules/quasar/src/components/btn/QBtn.js',
    '/app/frontend/node_modules/quasar/src/components/spinner/QSpinner.js',
    '/app/frontend/node_modules/quasar/src/utils/private/create.js',
    '/app/frontend/node_modules/quasar/src/utils/event.js',
    '/app/frontend/node_modules/quasar/src/utils/private/global-nodes.js',
    '/app/frontend/node_modules/quasar/src/utils/is.js',
    '/app/frontend/node_modules/quasar/src/utils/private/define-reactive-plugin.js',
    '/app/frontend/node_modules/quasar/src/utils/prevent-scroll.js',
    '/app/frontend/node_modules/@vue/reactivity/package.json',
    '/app/frontend/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
    '/app/frontend/node_modules/quasar/src/plugins/Platform.js',
    '/app/frontend/node_modules/quasar/src/plugins/Screen.js',
    '/app/frontend/node_modules/quasar/src/plugins/Dark.js',
    '/app/frontend/node_modules/quasar/src/history.js',
    '/app/frontend/node_modules/quasar/src/body.js',
    '/app/frontend/node_modules/quasar/src/utils/private/symbols.js',
    '/app/frontend/node_modules/quasar/src/utils/private/global-config.js',
    '/app/frontend/node_modules/quasar/lang/en-US.mjs',
    '/app/frontend/node_modules/quasar/src/utils/private/inject-obj-prop.js',
    '/app/frontend/node_modules/quasar/icon-set/material-icons.mjs',
    '/app/frontend/node_modules/quasar/src/composables/private/use-size.js',
    '/app/frontend/node_modules/quasar/src/utils/private/render.js',
    '/app/frontend/node_modules/quasar/src/directives/Ripple.js',
    '/app/frontend/node_modules/quasar/src/components/btn/use-btn.js',
    '/app/frontend/node_modules/quasar/src/utils/private/key-composition.js',
    '/app/frontend/node_modules/quasar/src/components/spinner/use-spinner.js',
    '/app/frontend/node_modules/quasar/src/utils/scroll.js',
    '/app/frontend/node_modules/vue-i18n/package.json',
    '/app/frontend/node_modules/vue3-apexcharts/package.json',
    '/app/frontend/node_modules/pinia/package.json',
    '/app/frontend/node_modules/axios/package.json',
    '/app/frontend/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js',
    '/app/frontend/node_modules/quasar/wrappers/index.mjs',
    '/app/frontend/node_modules/pinia/dist/pinia.mjs',
    '/app/frontend/node_modules/axios/index.js',
    '/app/frontend/src/services/AppLogger.ts',
    '/app/frontend/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
    '/app/frontend/src/i18n/index.ts',
    '/app/frontend/node_modules/vue3-cookies/package.json',
    '/app/frontend/node_modules/vue3-cookies/dist/index.js',
    '/app/frontend/node_modules/quasar/src/utils/debounce.js',
    '/app/frontend/node_modules/quasar/src/utils/set-css-var.js',
    '/app/frontend/node_modules/quasar/src/utils/dom.js',
    '/app/frontend/node_modules/quasar/src/utils/throttle.js',
    '/app/frontend/node_modules/quasar/src/utils/private/noop-ssr-directive-transform.js',
    '/app/frontend/node_modules/quasar/src/composables/private/use-align.js',
    '/app/frontend/node_modules/quasar/src/composables/private/use-router-link.js',
    '\x00commonjsHelpers.js',
    '\x00/app/frontend/node_modules/vue3-apexcharts/dist/vue3-apexcharts.common.js?commonjs-module',
    '/app/frontend/node_modules/apexcharts/package.json',
    '\x00/app/frontend/node_modules/vue/dist/vue.runtime.esm-bundler.js?commonjs-proxy',
    '/app/frontend/node_modules/apexcharts/dist/apexcharts.common.js',
    '\x00/app/frontend/node_modules/apexcharts/dist/apexcharts.common.js?commonjs-proxy',
    '/app/frontend/node_modules/vue-router/package.json',
    'plugin-vue:export-helper',
    '/app/frontend/node_modules/vue-router/dist/vue-router.mjs',
    '/app/frontend/src/router/routes.ts',
    '/app/frontend/src/components/error/ErrorBoundary.vue',
    '/app/frontend/node_modules/pinia/node_modules/vue-demi/package.json',
    '/app/frontend/node_modules/@vue/devtools-api/package.json',
    '/app/frontend/node_modules/pinia/node_modules/vue-demi/lib/index.mjs',
    '/app/frontend/node_modules/@vue/devtools-api/lib/esm/index.js',
    ... 936 more items
  ]

Additional context

No response

The text was updated successfully, but these errors were encountered:

pdanpdan · 2023-11-09T22:46:49Z

vitejs/vite#5558
https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

if you read the docs the path starts with a . - a relative path

ivanabrkic · 2023-11-10T12:10:33Z

@pdanpdan Yes, in that case build is passing, but image is not showing. I've updated Stackblitz example. Thanks for looking into this.

ivanabrkic · 2023-11-10T12:33:04Z

@pdanpdan Yes, in that case build is passing, but image is not showing. I've updated Stackblitz example. Thanks for looking into this.

[plugin:vite:import-glob] Invalid glob: "src/**" (resolved: "src/**"). It must start with '/' or './'
I tried Vite/Vue3 project - and this is the statement I get, so you can use both. The thing is that ./ doesn't display image and just / does. Build passes in both cases.

Here's the working example: Vue + Vite starter

ivanabrkic added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Nov 9, 2023

github-actions bot added area/cli bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Nov 9, 2023

pdanpdan closed this as completed Nov 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trying to build Quasar/Vite app #16568

Trying to build Quasar/Vite app #16568

ivanabrkic commented Nov 9, 2023

pdanpdan commented Nov 9, 2023

ivanabrkic commented Nov 10, 2023

ivanabrkic commented Nov 10, 2023

Trying to build Quasar/Vite app #16568

Trying to build Quasar/Vite app #16568

Comments

ivanabrkic commented Nov 9, 2023

What happened?

What did you expect to happen?

Reproduction URL

How to reproduce?

Flavour

Areas

Platforms/Browsers

Quasar info output

Relevant log output

Additional context

pdanpdan commented Nov 9, 2023

ivanabrkic commented Nov 10, 2023

ivanabrkic commented Nov 10, 2023