Does Vite work with TS?

[francoism90]

It does start, but I'm keep getting the following errors:

$ yarn run dev
yarn run v1.22.17
$ vite
▲ [WARNING] Non-relative path "src/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:18:16:
      18 │       "src/*": ["src/*"],
         ╵                 ~~~~~~~

▲ [WARNING] Non-relative path "*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:19:16:
      19 │       "app/*": ["*"],
         ╵                 ~~~

▲ [WARNING] Non-relative path "src/components/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:20:23:
      20 │       "components/*": ["src/components/*"],
         ╵                        ~~~~~~~~~~~~~~~~~~

▲ [WARNING] Non-relative path "src/layouts/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:21:20:
      21 │       "layouts/*": ["src/layouts/*"],
         ╵                     ~~~~~~~~~~~~~~~

▲ [WARNING] Non-relative path "src/pages/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:22:18:
      22 │       "pages/*": ["src/pages/*"],
         ╵                   ~~~~~~~~~~~~~

▲ [WARNING] Non-relative path "src/assets/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:23:19:
      23 │       "assets/*": ["src/assets/*"],
         ╵                    ~~~~~~~~~~~~~~

▲ [WARNING] Non-relative path "src/boot/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

    node_modules/@quasar/app/tsconfig-preset.json:24:17:
      24 │       "boot/*": ["src/boot/*"]
         ╵                  ~~~~~~~~~~~~


  vite v2.8.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 177ms

[stefanvanherwijnen]

The aliases are not defined so you will have to use relative imports for now.

https://vitejs.dev/config/#resolve-alias

[francoism90]

@stefanvanherwijnen Could you be more specific please?

This is my tsconfig:

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": ".",
  },
  "include": [
    "src"
  ]
}

Does this mean I have to overrule the default given paths?

[stefanvanherwijnen]

No it's a vite setting , Instead of import from "src/.." use import from ".. /src" .
If you are not sure how and why I'd suggest waiting until Vite support matures as it can be extremely confusing.

[francoism90]

@stefanvanherwijnen I'll wait for a stable release. Thanks for the help. :)

[ghiscoding]

as pointed out, the Vite alias does work (in my case I use @ which is what most people tend to use but you could replace it with any other alias you wish to use)

vite.config.ts

export default defineConfig({
  plugins: [
    Vue({ template: { transformAssetUrls }, }),
    quasar({ sassVariables: 'src/styles/quasar.scss', }),
  ],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

About.vue

<script lang="ts">
import Content from '@/Content.vue';
</script>