vite-preset-react

vite-preset-react

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

Features:

• 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

Installation

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

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.

Errors

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.

License

MIT, see the license file.