{"id":22545,"library":"vite-config-react","title":"vite-config-react","description":"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.","status":"active","version":"1.2.8","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","react","vite-config","config-generator","typescript"],"install":[{"cmd":"npm install vite-config-react","lang":"bash","label":"npm"},{"cmd":"yarn add vite-config-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-config-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required to use the generated config.","package":"vite","optional":false},{"reason":"Package includes React preset that depends on this plugin.","package":"@vitejs/plugin-react","optional":true}],"imports":[{"note":"Named export, not default. ESM only – CJS require is not supported.","wrong":"import defineConfig from 'vite-config-react'","symbol":"defineConfig","correct":"import { defineConfig } from 'vite-config-react'"},{"note":"Named export. The preset is called 'reactPreset', not 'react'.","wrong":"import { react } from 'vite-config-react'","symbol":"reactPreset","correct":"import { reactPreset } from 'vite-config-react'"},{"note":"Plugin is a TypeScript type; import with `type` to avoid runtime issues.","wrong":"import { Plugin } from 'vite-config-react'","symbol":"Plugin","correct":"import type { Plugin } from 'vite-config-react'"}],"quickstart":{"code":"import { defineConfig, reactPreset } from 'vite-config-react';\n\nexport default defineConfig({\n  presets: [reactPreset()],\n  server: {\n    port: 3000,\n  },\n  build: {\n    sourcemap: true,\n  },\n});","lang":"typescript","description":"Generates a basic Vite config with React preset, custom server port, and sourcemaps enabled in build."},"warnings":[{"fix":"Pass presets as an array: presets: [reactPreset()].","message":"Config format changed in v1.0.0: presets are now an array instead of single object.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Upgrade Node.js to version 18 or higher.","message":"Node.js >=18 required starting from v1.2.0.","severity":"breaking","affected_versions":"<1.2.0"},{"fix":"Replace reactPreset({ include: '...' }) with reactPreset({ features: { include: '...' } }).","message":"The 'include' option in reactPreset is deprecated; use 'features.include' instead.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Ensure Vite version is 5 or higher.","message":"Requires Vite 5+; using with Vite 4 may cause runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import syntax. If using CJS project, use dynamic import().","message":"CommonJS (require) is not supported; only ESM imports work.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Set { \"type\": \"module\" } in package.json or rename file to .mjs and use Node --experimental-modules flag (deprecated).","cause":"Project is set to CommonJS (type: 'commonjs' in package.json) but uses ESM import.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Change to import { defineConfig } from 'vite-config-react'","cause":"Default import used instead of named import: import defineConfig from 'vite-config-react'","error":"TypeError: (0 , _viteConfigReact.defineConfig) is not a function"},{"fix":"Use correct import: import { reactPreset } from 'vite-config-react'","cause":"Misspelled or wrong import: import { react } from 'vite-config-react'","error":"Error: reactPreset is not a function"},{"fix":"Ensure Vite version >=5 and using vite-config-react exports correctly.","cause":"Config mismatch when using vite-config-react with older Vite version (<5) or misusing another config tool.","error":"Unknown option: presets. Did you mean 'plugins'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}