vite-plugin-custom-tsconfig

1.0.4 verified Mon Apr 27 auth: no javascript

A Vite plugin (v1.0.4, latest) that lets you use custom tsconfig filenames like tsconfig.build.json or tsconfig.app.json with Vite. It works by copying your chosen tsconfig.*.json to tsconfig.json before Vite starts and removing it after the build finishes. This is a simple solution for monorepos or projects needing different TypeScript configurations for different environments. The plugin is lightweight, has no dependencies, and supports both ESM and CJS imports. Unlike alternatives like tsconfig-paths-webpack-plugin for Webpack, this plugin is Vite-specific and focuses solely on swapping tsconfig.json files.

Common errors

error Cannot find module 'vite-plugin-custom-tsconfig' ↓

cause Package not installed or not in devDependencies.

fix

Run npm install --save-dev vite-plugin-custom-tsconfig

error TypeError: customTsConfig is not a function ↓

cause Using named import when package uses default export (or vice versa).

fix

Use import customTsConfig from 'vite-plugin-custom-tsconfig' or import { customTsConfig } from 'vite-plugin-custom-tsconfig' consistently.

error ENOENT: no such file or directory, open 'tsconfig.build.json' ↓

cause The specified filename does not exist in the project root.

fix

Create the file or adjust the filename option in the plugin config.

Warnings

gotcha The plugin copies and deletes tsconfig.json. Ensure no other tool relies on tsconfig.json being present at the same time. ↓

fix Run Vite builds sequentially or ensure other tools are not watching for tsconfig.json changes.

gotcha The plugin does not resolve paths or merge configs; it simply overwrites tsconfig.json with the specified file. If your custom tsconfig references other configs via extends, those must be correctly relative. ↓

fix Ensure your custom tsconfig extends relative paths correctly.

gotcha The plugin may cause issues with editors (VS Code) that watch for tsconfig.json changes, as the file is temporarily replaced. ↓

fix Copy the custom tsconfig manually or use a symlink during development.

Install

npm install vite-plugin-custom-tsconfig

yarn add vite-plugin-custom-tsconfig

pnpm add vite-plugin-custom-tsconfig

Imports

default

wrong

const customTsConfig = require('vite-plugin-custom-tsconfig')

correct

import customTsConfig from 'vite-plugin-custom-tsconfig'

Uses default export, but named export also available. Since v1.0.3, both work.

customTsConfig

wrong

import customTsConfig from 'vite-plugin-custom-tsconfig'

correct

import { customTsConfig } from 'vite-plugin-custom-tsconfig'

Named export added in v1.0.3. Prefer default import for simplicity.

Plugin

wrong

import { Plugin } from 'vite-plugin-custom-tsconfig'

correct

import type { Plugin } from 'vite'

Plugin type is from Vite, not this package.

Quickstart

Shows how to use the plugin to set a custom tsconfig filename (tsconfig.app.json) in your Vite configuration.

// vite.config.ts
import customTsConfig from 'vite-plugin-custom-tsconfig';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    customTsConfig({
      filename: 'tsconfig.app.json',
    }),
  ],
});