Give vite
the ability to resolve imports using TypeScript's path mapping.
-
Install as dev dependency
-
Inject
vite-tsconfig-paths
using thevite.config.ts
moduleimport { defineConfig } from 'vite' import tsconfigPaths from 'vite-tsconfig-paths' export default defineConfig({ plugins: [tsconfigPaths()], })
Note: You need to restart Vite when you update your paths
mappings.
-
root: string
The directory to crawl fortsconfig.json
files.
Defaults toviteConfig.root
-
projects: string[]
An array oftsconfig.json
paths (relative toviteConfig.root
) and/or directories that contain atsconfig.json
file.
This overrides theroot
option. -
extensions: string[]
File extensions to search for.
Defaults to.ts | .tsx | .js | .jsx | .mjs
-
loose: boolean
Disable strictness that limits path resolution to TypeScript and JavaScript modules.
Useful if you want asset URLs in Vue templates to be resolved.
If your tsconfig.json
file has "allowJs": true
in it, path resolution will be expanded beyond TypeScript modules. The following extensions will have their imports resolved by this plugin: .vue
, .svelte
, .mdx
, .mjs
, .js
, .jsx
If the baseUrl
is defined, it gets prepended to all bare imports, and its resolution will take precedence over node_modules. This is also how TypeScript does it.
Say the baseUrl
is ../root
and you import react
. This plugin will use ../root/react
if it exists. If not found, then react
is resolved normally. The baseUrl
is relative to the project root (where tsconfig.json
lives).
The include
and exclude
compiler options are respected.
Internally, globrex is used for glob matching.
The DEBUG
environment variable can be used to figure out why this plugin isn't working as you may have expected.
DEBUG=vite-tsconfig-paths yarn vite
If this package helps you, please donate! Any amount is greatly appreciated. 🥰
- ETH: 0xa446626195bbe4d0697e729c1433a86fB6Cf66cF
- BTC: 17vYtAUPKXzubMEnNcN8SiuFgicrd5Rp9A
- KIN: GBU7RDRD7VDVT254RR6PGMBJESXQVDHJ5CGGODZKRXM2P4MP3G5QSAMH