Registry / web-framework / vite-preset-react

vite-preset-react

library2.3.0jsnpmunverified

vite-preset-react is a Vite plugin designed to simplify the setup for React projects by bundling `@vitejs/plugin-react` and providing convenient opinionated options. It aims to reduce boilerplate and offer common optimizations out-of-the-box for React development within the Vite ecosystem. The current stable version is 2.3.0, with releases typically aligning with updates to the underlying `@vitejs/plugin-react` and addressing bug fixes or adding new features. Its key differentiators include options like automatic React DevTools removal for production builds, and flexible injection of the React runtime. This preset streamlines the Vite configuration, making it easier for developers to get started with React without manually configuring multiple plugins or handling complex build optimizations.

web-framework

npm install vite-preset-react

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PRESET-REACT

vite-preset-react

web-frameworkjavascriptv2.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

reactPreset

✓ import reactPreset from 'vite-preset-react';

✗ const reactPreset = require('vite-preset-react');

This package is primarily consumed as a default export in Vite configuration files, which are typically ESM-based. Direct CommonJS `require` usage is not officially supported and will likely result in issues.

UserConfig

✓ import { defineConfig } from 'vite'; import type { UserConfig } from 'vite';

While `vite-preset-react` itself exports a default function, understanding Vite's configuration types, like `UserConfig`, is crucial for correct integration within `vite.config.ts`.

ReactPresetOptions

✓ import reactPreset, { type ReactPresetOptions } from 'vite-preset-react';

For advanced TypeScript usage or external configuration, the type for the preset options can be imported. This helps in strictly typing configuration objects passed to `reactPreset()`.

This quickstart demonstrates how to integrate `vite-preset-react` into `vite.config.ts`, including common options like removing DevTools in production, passing options to the underlying `@vitejs/plugin-react`, and controlling React runtime injection.

import { defineConfig } from 'vite'; import reactPreset from 'vite-preset-react'; export default defineConfig({ plugins: [ reactPreset({ // Optional: Remove React DevTools from production builds for smaller bundle size removeDevtools: process.env.NODE_ENV === 'production', // Optional: Pass options directly to @vitejs/plugin-react reactPluginOptions: { exclude: [/^@mui\/icons-material/], fastRefresh: true }, // Optional: Control React runtime injection. Defaults to true for 'development' and false for 'production' injectReact: process.env.NODE_ENV === 'development' }) ], build: { outDir: 'dist', sourcemap: true }, server: { port: 3000, open: true } });

Debug

Known issues

breakingVersion 2.0.0 replaced `@vitejs/plugin-react-refresh` with `@vitejs/plugin-react`. If you were directly referencing the underlying refresh plugin, you'll need to update your code.

fix

Ensure your project's Vite configuration aligns with `@vitejs/plugin-react` if you're interacting with the plugin directly. `vite-preset-react` handles the internal plugin update, but awareness is key if you have deep integrations.

affects: >=2.0.0

breakingThe configuration option `reactRefreshOptions` was renamed to `reactPluginOptions` in version 2.0.0 to reflect the change in the underlying Vite React plugin.

fix

Update your `vite-preset-react` configuration in `vite.config.js` or `vite.config.ts` to use `reactPluginOptions` instead of `reactRefreshOptions`.

affects: >=2.0.0

gotchaWhen `removeDevtools` is set to `true`, ensure that if you are developing, DevTools are actually enabled in your browser to avoid console errors. This was fixed in v1.4.2 for cases where DevTools were not enabled, but it's good practice to be mindful of this option in development environments.

fix

Update to version 1.4.2 or newer to mitigate potential console errors when `removeDevtools = true` and DevTools are not active in the browser. For older versions, disable `removeDevtools` during development if you frequently encounter this.

affects: <1.4.2

gotchaThe `injectReact` flag (introduced in v1.2.0) controls whether React's `jsx-runtime` is automatically injected. While typically desired, understanding its behavior is important for specific build scenarios or if you manage JSX imports manually.

fix

Review the default behavior of `injectReact` (typically `true` in development, `false` in production) and explicitly set it in your configuration if your project has specific requirements for JSX runtime injection. E.g., `injectReact: false`.

affects: >=1.2.0

Errors

Common errors & fixes

TypeError: vite_preset_react_1.default is not a function

Attempting to use `require()` to import `vite-preset-react` as a default export in a CommonJS context.

fix

Ensure your Vite configuration file (`vite.config.js` or `vite.config.ts`) uses ESM syntax: `import reactPreset from 'vite-preset-react';` instead of `const reactPreset = require('vite-preset-react');`.

Error: [vite-preset-react] The option `reactRefreshOptions` is deprecated. Use `reactPluginOptions` instead.

Using the old `reactRefreshOptions` configuration property after upgrading to `vite-preset-react` version 2.0.0 or higher.

fix

Rename `reactRefreshOptions` to `reactPluginOptions` in your `vite-preset-react` configuration object within `vite.config.js` or `vite.config.ts`.

Error: The plugin 'vite-preset-react' was not registered correctly. Did you remember to add it to the 'plugins' array in your vite.config.js?

The `reactPreset()` function was called, but its result was not included in the `plugins` array of the Vite configuration.

fix

Ensure that `reactPreset()` is called and the returned plugin object is added to the `plugins` array in your `vite.config.js` or `vite.config.ts` file, e.g., `plugins: [reactPreset()]`.

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

viterequiredPeer dependency for Vite bundler integration.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/PuruVJ/vite-preset-react ↗

packagehttps://www.npmjs.com/package/vite-preset-react ↗