Mention TS aliases in app-webpack to app-vite migration guide

[sschneider-ihre-pvs]

What happened?

Following the migration guide I edited files and copied source files. I only build SPA. First, there is no easy way to get the path aliases from typescript into vite within the quasar.config.js. Second, vite is unable to load the src/css/app.sass and throws an error in the browser that the file was blocked due to disallowed MIME Type "". When adding an alias it now can be found. Sadly, that does not count for the src/App.vue. I get the same error here which is a showstopper

What did you expect to happen?

The migration guide towards app-vue would be working with typescript, path aliases

Reproduction URL

unable to provice one

How to reproduce?

Following the migration guide steps and start quasar dev

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Quasar Extras (@quasar/extras), TypeScript Support, SPA Mode

Platforms/Browsers

Firefox

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 18.14.0
Global packages
  NPM - 9.3.1
  yarn - 1.22.4
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed
Important local packages
  quasar - 2.11.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.4.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.47 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - Not installed
  vuex - Not installed
  vite - 3.2.6 -- Native-ESM powered web dev build tool
  eslint - 8.39.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
  @quasar/quasar-app-extension-apollo - 2.0.0-beta.5 -- A Quasar app extension to add GraphQL support using Apollo Client.
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-alpha.10 -- A Quasar App Extension for running Jest tests
  @quasar/quasar-app-extension-testing - 2.1.0 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-e2e-cypress - 5.1.0 -- A Quasar App Extension for Cypress e2e

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @sschneider-ihre-pvs! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[yusufkandemir]

For getting aliases from tsconfig.json into Vite, you can use https://github.com/aleclarson/vite-tsconfig-paths

// quasar.conf file > build
vitePlugins: [
  ['vite-tsconfig-paths']
]

Keeping this issue open so we can update the docs with this tip. However, I am pretty sure Webpack wasn't picking up the aliases from tsconfig.json automatically, that should be a Webpack plugin you were using. So, this information can go into the "adding aliases" section, not into the migration guide.

Sadly, that does not count for the src/App.vue. I get the same error here which is a showstopper

For this you would need to fill a bug report with a reproduction, it's impossible to help otherwise.

[sschneider-ihre-pvs]

Ok I will try that first, and report back.

[sschneider-ihre-pvs]

ok that seems to work better except for path aliases that contain an @ like internal monorepo dependencies that usually start with @${projectName}/something

[sschneider-ihre-pvs]

ok it seems that the solution is to add this for monorepos

// quasar.conf file > build
vitePlugins: [
  ['vite-tsconfig-paths', { projects: ["../../tsconfig.base.json", "./tsconfig.json"] }]
]