@fwouts/vite-tsconfig-paths
v4.2.1
Published
Vite resolver for TypeScript compilerOptions.paths
Downloads
6,717
Readme
👋 Do you like Postgres 🐘? I'm making a 100% type-safe query builder (not an ORM), and I want your help fleshing it out.
Btw, it generates the types and client from your database schema, so it's never out-of-date and you have access to every native Postgres function!
I want to add a powerful plugin system soon, and eventually all functionality will be pluggable.
vite-tsconfig-paths
Give vite
the ability to resolve imports using TypeScript's path mapping.
Usage
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.
Options
root: string
The directory to search fortsconfig.json
files.The default value of this option depends on whether
projects
is defined. If it is, then the Vite project root is used. Otherwise, Vite'ssearchForWorkspaceRoot
function is used.projects: string[]
If you have an esoteric setup, you might need this option to specify where your tsconfig files are located. The paths within are relative to theroot
option.If defined, the
root
directory won't be searched for tsconfig files. You should always try using just theroot
option first, because this option is more brittle.loose: boolean
Disable strictness that limits path resolution to TypeScript and JavaScript importers.Useful if you want imports in Vue templates to be resolved, but don't want to use
allowJs
in your tsconfig, for example.In other words, when
loose: true
is used, any file that gets transpiled into JavaScript will have its imports resolved by this plugin.parseNative: boolean
Enable use of thetsconfck.parseNative
function, which delegates the loading of tsconfig files to the TypeScript compiler. You'll probably never need this, but I added it just in case.⚠️ This option can slow down Vite's startup time by as much as 600ms, due to the size of the TypeScript compiler. Only use it when necessary.
ignoreConfigErrors: boolean
When true, parsing errors encountered while loading tsconfig files will be ignored. This is useful if you have a monorepo with multiple tsconfig files, and you don't want to see errors for the ones that aren't relevant to the current project.
allowJs
If your tsconfig file has "allowJs": true
in it, path resolution will be expanded beyond TypeScript importers. The following extensions will have their imports resolved by this plugin: .vue
, .svelte
, .mdx
, .mjs
, .js
, .jsx
baseUrl
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).
include/exclude
The include
and exclude
tsconfig options are respected.
Internally, globrex is used for glob matching.
Troubleshooting
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
Also, check out the Troubleshooting wiki page for more guidance.