{"id":13417398,"url":"https://github.com/aleclarson/vite-tsconfig-paths","last_synced_at":"2025-05-12T15:24:12.146Z","repository":{"id":37918238,"uuid":"285385310","full_name":"aleclarson/vite-tsconfig-paths","owner":"aleclarson","description":"Support for TypeScript's path mapping in Vite","archived":false,"fork":false,"pushed_at":"2025-04-16T20:09:52.000Z","size":576,"stargazers_count":1472,"open_issues_count":7,"forks_count":53,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-12T15:24:04.047Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aleclarson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["aleclarson"]}},"created_at":"2020-08-05T19:29:06.000Z","updated_at":"2025-05-10T17:21:28.000Z","dependencies_parsed_at":"2024-01-16T22:04:08.082Z","dependency_job_id":"58b1b384-57c1-4877-8d04-b6bc664bdade","html_url":"https://github.com/aleclarson/vite-tsconfig-paths","commit_stats":{"total_commits":234,"total_committers":22,"mean_commits":"10.636363636363637","dds":"0.11965811965811968","last_synced_commit":"444ee7b0d05a90e0a6921052bde034dea88a7c24"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-tsconfig-paths","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-tsconfig-paths/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-tsconfig-paths/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-tsconfig-paths/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aleclarson","download_url":"https://codeload.github.com/aleclarson/vite-tsconfig-paths/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253764158,"owners_count":21960523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T22:00:36.447Z","updated_at":"2025-05-12T15:24:12.089Z","avatar_url":"https://github.com/aleclarson.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aleclarson"],"categories":["Plugins","TypeScript","others"],"sub_categories":["Framework-agnostic Plugins","Resolvers"],"readme":"👋 Check out [Radashi](https://github.com/radashi-org/radashi), my latest endeavor.\n\n\u003ca href=\"https://github.com/radashi-org/radashi\"\u003e\u003cimg src=\"https://github.com/radashi-org/radashi/raw/main/.github/img/notice.png\" alt=\"Radashi\" width=\"100%\" /\u003e\u003c/a\u003e\n\n---\n\n\u0026nbsp;\n\n# vite-tsconfig-paths\n\n[![npm](https://img.shields.io/npm/v/vite-tsconfig-paths.svg)](https://www.npmjs.com/package/vite-tsconfig-paths)\n[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nGive [`vite`] the ability to resolve imports using TypeScript's path mapping.\n\n[`vite`]: https://github.com/vitejs/vite\n\n\u003e [!NOTE]\n\u003e **New in v6** – This plugin now supports on-demand tsconfig loading, along with automatic reloading when tsconfig files are changed. Use the new `projectDiscovery: \"lazy\"` option to enable this behavior (currently in beta).\n\u003e\n\u003e ```sh\n\u003e pnpm add vite-tsconfig-paths@next -D\n\u003e ```\n\u003e\n\u003e See the [Releases](https://github.com/aleclarson/vite-tsconfig-paths/releases) for more details.\n\n## Install\n\n```sh\npnpm add -D vite-tsconfig-paths\n```\n\n```sh\nnpm install --save-dev vite-tsconfig-paths\n```\n\n```sh\nyarn add -D vite-tsconfig-paths\n```\n\n## Setup\n\n1. 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\n\n2. Inject `vite-tsconfig-paths` in the Vite config\n\n   ```ts\n   import { defineConfig } from 'vite'\n   import tsconfigPaths from 'vite-tsconfig-paths'\n\n   export default defineConfig({\n     plugins: [tsconfigPaths()],\n   })\n   ```\n\n### ⚠️ CSS imports are not supported.\n\nDue to a Vite limitation, CSS files (and CSS dialects) cannot be resolved with this plugin.\n\nThis is being tracked in [#30](https://github.com/aleclarson/vite-tsconfig-paths/issues/30).\n\n### ⚠️ Non-TypeScript modules need special configuration.\n\nTo 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.\n\n```json\n{\n  \"compilerOptions\": {\n    \"allowJs\": true\n  }\n}\n```\n\n**Alternative:** If you prefer to avoid `allowJs` or it didn't help, passing `loose: true` to the plugin constructor should work.\n\n```ts\ntsconfigPaths({ loose: true })\n```\n\n### ⚠️ TSConfigs are not watched. (v5 and below)\n\nYou should restart Vite when you make changes to a tsconfig file; particularly these settings: `include`, `exclude`, `compilerOptions.paths`, and `compilerOptions.baseUrl`.\n\nThis is being tracked in [#17](https://github.com/aleclarson/vite-tsconfig-paths/issues/17) (contributions welcome).\n\n\u0026nbsp;\n\n## Plugin Options\n\nYou pass these options when calling the plugin constructor in your Vite config.\n\n\u003e [!WARNING]\n\u003e You should try using the plugin without *any* of these options, and only set them when you know you need them.\n\n```ts\nimport { defineConfig } from 'vite'\nimport tsconfigPaths from 'vite-tsconfig-paths'\n\nexport default defineConfig({\n  plugins: [tsconfigPaths({ /* options go here */ })],\n})\n```\n\n#### `projectDiscovery: \"eager\" | \"lazy\"`\n\nControl how tsconfig files are discovered and loaded. By default, `\"eager\"` is used, which means your Vite project is scanned for tsconfig files when the plugin is initialized, and never again after that. The `root` option only works in eager mode.\n\nWhen `\"lazy\"` is used, tsconfig files are only scanned when an import is encountered in a module with a supported file extension that exists in the same directory as the `tsconfig.json` file (or one of its subdirectories). In other words, importers with a `tsconfig.json` or `jsconfig.json` file in one of their parent directories will have their imports resolved by this plugin.\n\n#### `root: string`\n\nThe directory to search for `tsconfig.json` files.\n\nThe default value of this option depends on whether `projects` is defined. If it is, then the [Vite project root](https://vitejs.dev/config/shared-options.html#root) is used. Otherwise, Vite's [`searchForWorkspaceRoot`](https://vitejs.dev/guide/api-javascript.html#searchforworkspaceroot) function is used.\n\n#### `projects: string[]`\n\nIf 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.\n\nIf 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.\n\n#### `loose: boolean`\n\nDisable strictness that limits path resolution to TypeScript and JavaScript importers. In other words, when `loose: true` is used, any file that gets transpiled into JavaScript will have its imports resolved by this plugin.\n\nFor example, this is useful if you want imports in Vue templates to be resolved, but don't want to use `allowJs` in your tsconfig.\n\n#### `parseNative: boolean`\n\nEnable use of the [`tsconfck.parseNative`](https://github.com/dominikg/tsconfck/blob/main/docs/api.md#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.\n\n\u003e [!WARNING]\n\u003e 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.\n\n#### `ignoreConfigErrors: boolean`\n\nWhen true, parsing errors encountered while loading tsconfig files will be ignored.\n\nThis 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.\n\n#### `skip: (dir: string) =\u003e boolean`\n\nA function that determines which directories to skip when searching for tsconfig.json files.\n\nWhile `.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.\n\n\u0026nbsp;\n\n## TSConfig Options\n\n### allowJs\n\nIf 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`\n\nIf you believe another file extension should be supported by default, please open an issue or pull request.\n\n\u0026nbsp;\n\n### baseUrl\n\nIf 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.\n\nSay 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).\n\n\u0026nbsp;\n\n### include/exclude\n\nThe `include` and `exclude` tsconfig options are respected.\n\nInternally, [globrex](https://github.com/terkelg/globrex) is used for glob matching.\n\n\u0026nbsp;\n\n## Troubleshooting\n\nThe `DEBUG` environment variable can be used to figure out why this plugin isn't working as you may have expected.\n\n```sh\nDEBUG=vite-tsconfig-paths yarn vite\n```\n\nAlso, check out the [Troubleshooting](https://github.com/aleclarson/vite-tsconfig-paths/wiki/Troubleshooting) wiki page for more guidance.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleclarson%2Fvite-tsconfig-paths","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleclarson%2Fvite-tsconfig-paths","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleclarson%2Fvite-tsconfig-paths/lists"}