npmpackage.info

Gathering detailed insights and metrics for @vitejs/plugin-react

Other packages similar to @vitejs/plugin-react

@vitejs/plugin-react-swc

3.10.2

Speed up your Vite dev server with SWC

@vitejs/plugin-react-refresh

1.3.6

Provides [React Refresh](https://www.npmjs.com/package/react-refresh) support for Vite.

vite-plugin-react-router-generator

1.0.6

A vitejs plugin to use generator react-router

@vitejs/plugin-react-oxc

0.2.2

The future default Vite plugin for React projects

Gathering detailed insights and metrics for @vitejs/plugin-react

@vitejs/plugin-react - 4.6.0 | npmpackage.info

@vitejs/plugin-react

The all-in-one Vite plugin for React projects.

4.6.0

747

MIT

TypeScript

3.97 kB

544,380,413 7.4

Installations

npm install @vitejs/plugin-react

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

^14.18.0 || >=16.0.0

Node Version

20.19.2

NPM Version

10.8.2 Score

Supply Chain

88.7

Quality

93.4

Maintenance

100

Vulnerability

98.6

License

Pull Requests

Open

11

Total

247

Closed

39

Merged

197

Issues

Open

14

Total

212

Closed

198

Releases

plugin-react@4.6.0

Updated on Jun 23, 2025

plugin-react-oxc@0.2.3

Updated on Jun 16, 2025

plugin-react-oxc@0.2.2

Updated on Jun 10, 2025

plugin-react-swc@3.10.2

Updated on Jun 10, 2025

plugin-react@4.5.2

Updated on Jun 10, 2025

plugin-react-oxc@0.2.1

Updated on Jun 03, 2025

View All 40 releases

Languages

TypeScript

JavaScript

CSS

HTML

MDX

TypeScript (66.66%)

JavaScript (22.89%)

CSS (5.69%)

HTML (4.58%)

MDX (0.18%)

Developer

vitejs

Download Statistics

Total Downloads

544,380,413

Last Day

471,159

Last Week

8,707,363

Last Month

36,556,311

Last Year

306,544,226

GitHub Statistics

MIT License

747 Stars

1,136 Commits

159 Forks

12 Watchers

5 Branches

45 Contributors

Updated on Jul 04, 2025

Bundle Size

10.19 kB

Minified

3.97 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 45 Contributors

Package Meta Information

Latest Version

4.6.0

Package Id

@vitejs/plugin-react@4.6.0

Unpacked Size

62.16 kB

Size

18.53 kB

File Count

NPM Version

10.8.2

Node Version

20.19.2

Published on

Jun 23, 2025

Total Downloads

Cumulative downloads

Total Downloads

544,380,413

Last Day

-9%

471,159

Compared to previous day

Last Week

-5.5%

8,707,363

Compared to previous week

Last Month

6.8%

36,556,311

Compared to previous month

Last Year

73.3%

306,544,226

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@vitejs/plugin-react

The default Vite plugin for React projects.

enable Fast Refresh in development (requires react >= 16.9)
use the automatic JSX runtime
use custom Babel plugins/presets
small installation size

1// vite.config.js
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4
5export default defineConfig({
6  plugins: [react()],
7})

Options

include/exclude

Includes .js, .jsx, .ts & .tsx by default. This option can be used to add fast refresh to .mdx files:

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3import mdx from '@mdx-js/rollup'
4
5export default defineConfig({
6  plugins: [
7    { enforce: 'pre', ...mdx() },
8    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
9  ],
10})

node_modules are never processed by this plugin (but esbuild will)

jsxImportSource

Control where the JSX factory is imported from. Default to 'react'

1react({ jsxImportSource: '@emotion/react' })

jsxRuntime

By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option.

1react({ jsxRuntime: 'classic' })

babel

The babel option lets you add plugins, presets, and other configuration to the Babel transformation performed on each included file.

1react({
2  babel: {
3    presets: [...],
4    // Your plugins run before any built-in transform (eg: Fast Refresh)
5    plugins: [...],
6    // Use .babelrc files
7    babelrc: true,
8    // Use babel.config.js files
9    configFile: true,
10  }
11})

Note: When not using plugins, only esbuild is used for production builds, resulting in faster builds.

Proposed syntax

If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them with the babel.parserOpts.plugins option:

1react({
2  babel: {
3    parserOpts: {
4      plugins: ['decorators-legacy'],
5    },
6  },
7})

This option does not enable code transformation. That is handled by esbuild.

Note: TypeScript syntax is handled automatically.

Here's the complete list of Babel parser plugins.

reactRefreshHost

The reactRefreshHost option is only necessary in a module federation context. It enables HMR to work between a remote & host application. In your remote Vite config, you would add your host origin:

1react({ reactRefreshHost: 'http://localhost:3000' })

Under the hood, this simply updates the React Fash Refresh runtime URL from /@react-refresh to http://localhost:3000/@react-refresh to ensure there is only one Refresh runtime across the whole application. Note that if you define base option in the host application, you need to include it in the option, like: http://localhost:3000/{base}.

Middleware mode

In middleware mode, you should make sure your entry index.html file is transformed by Vite. Here's an example for an Express server:

1app.get('/', async (req, res, next) => {
2  try {
3    let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')
4
5    // Transform HTML using Vite plugins.
6    html = await viteServer.transformIndexHtml(req.url, html)
7
8    res.send(html)
9  } catch (e) {
10    return next(e)
11  }
12})

Otherwise, you'll probably get this error:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

disableOxcRecommendation

If set, disables the recommendation to use @vitejs/plugin-react-oxc (which is shown when rolldown-vite is detected and babel is not configured).

Consistent components exports

For React refresh to work correctly, your file should only export React components. You can find a good explanation in the Gatsby docs.

If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.

You can catch mistakes and get more detailed warning with this eslint rule.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

8

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

8

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 8

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:102: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-continuous.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/release-continuous.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-continuous.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vitejs/vite-plugin-react/release-continuous.yml/main?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 11 out of 11 third-party GitHubAction dependencies pinned

7

SAST

Determines if the project uses static code analysis.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.4

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @vitejs/plugin-react

Other packages similar to @vitejs/plugin-react

@vitejs/plugin-react

Installations

Developer Guide

Yes

ESM

^14.18.0 || >=16.0.0

20.19.2

10.8.2

Score

Pull Requests

11

247

39

197

Issues

14

212

198

Releases

Languages

Developer

vitejs

Download Statistics

GitHub Statistics

Bundle Size

10.19 kB

3.97 kB

Maintainers

Package Meta Information

Total Downloads

544,380,413

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@vitejs/plugin-react

Options

include/exclude

jsxImportSource

jsxRuntime

babel

Proposed syntax

reactRefreshHost

Middleware mode

disableOxcRecommendation

Consistent components exports

10

10

10

10

10

8

8

7

6

4

0

0

7.4

/10