An all in one preset for writing React apps with the vite bundler.
Features:
- Sets up Hot Module Replacement via @vitejs/plugin-react-refresh
- Automatically injects
React
into your components, so you don't have toimport React from 'react'
in every file. - 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 })],
});
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 |
If you are using the official react
or react-ts
template, and wanna switch to this one, follow this:
-
Remove
@vitejs/plugin-react-refresh
frompackage.json
. -
Install this preset:
npm install -D vite-preset-react
Or if you're a Yarn person
yarn add -D vite-preset-react
- If you're using
react-ts
template, opentsconfig.json
, and changejsx
field topreserve
.
There!! You're all set!
This error occurs when manually import React
in a file, with the config option injectReact
set to true
.
Solution would be to remove the import if it is the only file in the whole codebase importing React
.
Or you can set injectReact
option to false
. This will suppress this error and allow you to import React
in every file.
This error arises when you have the option injectReact
set to false
, but you're not importing React
in some of your files. Solution would be to set this option to true
; Or put an import React from 'react'
statement in every file containing JSX code.
If you're getting red squiggles under your JSX, follow this:
- Go to tsconfig.json
- Set the
jsx
option topreserve
.
There, that should fix it.
MIT, see the license file.