【Vite Error Resolution】How to Fix the “vite-tsconfig-paths Not Found” Issue

Introduction

When I tried to start the development server after creating a new React + Vite project,
the following error occurred:

> vite

failed to load config from ~/project-name/vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘vite-tsconfig-paths’

Problem

vite-tsconfig-paths is imported within vite.config.ts
However, it is not installed in node_modules
As a result, the “Cannot find package ‘vite-tsconfig-paths’” error occurs, preventing the development server from starting

Solution

1. If you want to use vite-tsconfig-paths

Install it with the following command

npm install vite-tsconfig-paths -D
# or
yarn add -D vite-tsconfig-paths

Afterwards, configure vite.config.ts as follows:

import { defineConfig } from “vite”;
import react from “@vitejs/plugin-react”;
import tsconfigPaths from “vite-tsconfig-paths”;

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

2. If not needed

If you don't use vite-tsconfig-paths,
simply remove the following from vite.config.ts:

import tsconfigPaths from “vite-tsconfig-paths”;

// plugins: [react(), tsconfigPaths()],
plugins: [react()],

---

Conclusion

The error was caused by a plugin specified in vite.config.ts not being installed.
The solution is either to install it or remove it from the configuration.

Translated with DeepL.com (free version)