Why can't I change the path alias "~/*" to "@/*" in the tsconfig.json?
Using
@/* would be easier on my keyboard. After changing it the imports work correctly in VS Code typescript, but when I run the app it complains that modules are not found.
Trying to change the alias to anything else other than ~/* (eg. src/*) also doesn't work.
Do I need to change it somewhere else to make it work for runtime?7 Replies
Aha... figured it out from a google search.
https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/
Import Aliases in Vite - Vue School Articles
Support the @ Import alias in Vite just like with Vue CLI.
I'm guessing the
~ alias is hardcoded somewhere.
Figured # is a better character to use as @ is used a lot in actual package names and it seems to cause issues.I use https://www.npmjs.com/package/vite-tsconfig-paths often to sync my tsconfig alias to the vite config
npm
vite-tsconfig-paths
Vite resolver for TypeScript compilerOptions.paths. Latest version: 4.3.2, last published: a month ago. Start using vite-tsconfig-paths in your project by running
npm i vite-tsconfig-paths. There are 338 other projects in the npm registry using vite-tsconfig-paths.Nice! Thank you for the advice!
Ur welcome!
And is it possible to get vscode to recognize your alias too?
vscode recognizes them through typescript so you specify them in
compilerOptions.paths of tsconfig or jsconfig if you're using js and still want auto complete
then you also need to configure your build tool to recognize them, manually or with some helpers
for vite, the one bigmistqke shared above works