vite-config-react

1.2.8 verified Mon Apr 27 auth: no javascript

vite-config-react is a lightweight, modular Vite configuration generator for React projects. Current version 1.2.8 requires Node.js >=18 and Vite 5+. It provides a clean API to generate Vite configs with presets for React, plugins, and features. Unlike manually writing vite.config.ts, it offers a declarative, composable approach with built-in React support, TypeScript types, and extensibility through plugins. Updated regularly with minor releases every few months. Focuses on developer experience and zero-config setup while remaining fully customizable.

Common errors

error SyntaxError: Cannot use import statement outside a module ↓

cause Project is set to CommonJS (type: 'commonjs' in package.json) but uses ESM import.

fix

Set { "type": "module" } in package.json or rename file to .mjs and use Node --experimental-modules flag (deprecated).

error TypeError: (0 , _viteConfigReact.defineConfig) is not a function ↓

cause Default import used instead of named import: import defineConfig from 'vite-config-react'

fix

Change to import { defineConfig } from 'vite-config-react'

error Error: reactPreset is not a function ↓

cause Misspelled or wrong import: import { react } from 'vite-config-react'

fix

Use correct import: import { reactPreset } from 'vite-config-react'

error Unknown option: presets. Did you mean 'plugins'? ↓

cause Config mismatch when using vite-config-react with older Vite version (<5) or misusing another config tool.

fix

Ensure Vite version >=5 and using vite-config-react exports correctly.

Warnings

breaking Config format changed in v1.0.0: presets are now an array instead of single object. ↓

fix Pass presets as an array: presets: [reactPreset()].

breaking Node.js >=18 required starting from v1.2.0. ↓

fix Upgrade Node.js to version 18 or higher.

deprecated The 'include' option in reactPreset is deprecated; use 'features.include' instead. ↓

fix Replace reactPreset({ include: '...' }) with reactPreset({ features: { include: '...' } }).

gotcha Requires Vite 5+; using with Vite 4 may cause runtime errors. ↓

fix Ensure Vite version is 5 or higher.

gotcha CommonJS (require) is not supported; only ESM imports work. ↓

fix Use import syntax. If using CJS project, use dynamic import().

Install

npm install vite-config-react

yarn add vite-config-react

pnpm add vite-config-react

Imports

defineConfig

wrong

import defineConfig from 'vite-config-react'

correct

import { defineConfig } from 'vite-config-react'

Named export, not default. ESM only – CJS require is not supported.

reactPreset

wrong

import { react } from 'vite-config-react'

correct

import { reactPreset } from 'vite-config-react'

Named export. The preset is called 'reactPreset', not 'react'.

Plugin

wrong

import { Plugin } from 'vite-config-react'

correct

import type { Plugin } from 'vite-config-react'

Plugin is a TypeScript type; import with `type` to avoid runtime issues.

Quickstart

Generates a basic Vite config with React preset, custom server port, and sourcemaps enabled in build.

import { defineConfig, reactPreset } from 'vite-config-react';

export default defineConfig({
  presets: [reactPreset()],
  server: {
    port: 3000,
  },
  build: {
    sourcemap: true,
  },
});