This content originally appeared on DEV Community and was authored by Kazutora Hattori
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)
This content originally appeared on DEV Community and was authored by Kazutora Hattori