Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
vite-tsconfig-paths
Advanced tools
The vite-tsconfig-paths npm package is a plugin for Vite that allows users to leverage the paths defined in their tsconfig.json file for module resolution. This means that you can define custom paths for imports in your TypeScript configuration and have them correctly resolved when using Vite as your build tool.
Custom Path Resolution
Allows you to use custom paths defined in tsconfig.json within your Vite project. For example, if you have a path alias '@' pointing to 'src/', you can import modules using this alias.
import { myUtil } from '@/utils/myUtil';
Easy Configuration
The plugin can be easily added to your Vite configuration with a simple import and adding it to the plugins array.
import viteTsconfigPaths from 'vite-tsconfig-paths';
export default {
plugins: [viteTsconfigPaths()],
};
This is a webpack plugin that allows you to utilize the paths defined in tsconfig.json for module resolution in a webpack project. It serves a similar purpose to vite-tsconfig-paths but is intended for use with webpack instead of Vite.
This Babel plugin allows you to add new 'root' directories that contain your modules. It also allows you to map a path to another path, similar to the 'paths' option in tsconfig.json, but it is used in conjunction with Babel and not specifically tied to Vite or TypeScript.
Aliasify is a Browserify transform for aliasing module paths. While it is not specifically designed for Vite or TypeScript, it provides similar functionality in terms of allowing custom resolution paths for modules in a Browserify setup.
👋 Check out Radashi, my latest endeavor.
Give vite
the ability to resolve imports using TypeScript's path mapping.
Install as dev dependency
Ensure the project either has "type": "module"
set or that the Vite config is renamed to vite.config.mjs
/ vite.config.mts
depending on whether TypeScript is used
Inject vite-tsconfig-paths
in the Vite config
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [tsconfigPaths()],
})
(optional) ⚠️ To enable path resolution in non-TypeScript modules (e.g. .vue
, .svelte
, .mdx
), you must set the allowJs
option to true in your tsconfig.json
file. If that doesn't work, you might need to enable loose: true
to resolve all files. Note that, due to a Vite limitation, CSS files (and CSS dialects) cannot be resolved with this plugin (see #30).
Note: You need to restart Vite when you update your paths
mappings. This is being tracked in #17 (contributions welcome).
root: string
The directory to search for tsconfig.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's searchForWorkspaceRoot
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 the root
option.
If defined, the root
directory won't be searched for tsconfig files. You should always try using just the root
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 the tsconfck.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.
skip: (dir: string) => boolean
A function that determines which directories to skip when searching for tsconfig.json files. While .git
and node_modules
directories are always skipped, this option allows you to skip additional directories, which is useful in large monorepos to improve performance.
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
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
tsconfig 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
Also, check out the Troubleshooting wiki page for more guidance.
FAQs
Vite resolver for TypeScript compilerOptions.paths
The npm package vite-tsconfig-paths receives a total of 2,089,603 weekly downloads. As such, vite-tsconfig-paths popularity was classified as popular.
We found that vite-tsconfig-paths demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.