TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published


An all in one opinionated preset for writing React apps with the vite bundler.


  • Sets up Hot Module Replacement & Automatic JSX runtime(No need for import React from 'react') via @vitejs/plugin-react
  • Remove devtools in production if needed


First install the preset package from npm:

npm install --save-dev vite-preset-react
# or
yarn add -D vite-preset-react

Enhance your vite config with the React preset plugin in your vite.config.ts or vite.config.js:

import { defineConfig } from 'vite';
import react from 'vite-preset-react';

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


Options can be passed to our preset plugin via the first argument:

export default defineConfig({
  plugins: [react({ removeDevtoolsInProd: true, injectReact: true })],

Available options

Option Type Default Description
removeDevtoolsInProd boolean false Removes React Devtools in production build
injectReact boolean true Injects import React from 'react' in every JS file to avoid importing it in every file manually
reactPluginOptions Options undefined Options to pass to the underlying @vitejs/plugin-react. See here

Using in official starter templates

If you are using the official react or react-ts template, and wanna switch to this one, follow this:

  1. Remove @vitejs/plugin-react from package.json.

  2. Install this preset:

npm install -D vite-preset-react

Or if you're a Yarn person

yarn add -D vite-preset-react
  1. If you're using react-ts template, open tsconfig.json, and change jsx field to preserve.

There!! You're all set!

Using with Preact

Theoretically, this package should work well with preact. However, it's highly recommended to use the official @preactjs/preset-vite.


Not importing React doesn't allow JSX in TSX files

If you're getting red squiggles under your JSX, follow this:

  1. Go to tsconfig.json
  2. Set the jsx option to preserve.

There, that should fix it.

Differences from @vitejs/plugin-react

When would you want to use this plugin instead of the official @vitejs/plugin-react? Well, the answer is: If you don't need control over whether React devtools are removed or not

Yep, that's pretty much it. Earlier, when the official react plugin was @vitejs/plugin-react-refresh, this plugin would enable automatic JSX, so you wouldn't have import React in every file. Now with the new @vitejs/plugin-react providing the much better automatic JSX runtime, eliminating the need for vite-preset-react altogether, unless you need to remove react devtools.


MIT, see the license file.



Package Sidebar


DownloadsWeekly Downloads






Unpacked Size

15.6 kB

Total Files


Last publish


  • puruvj