Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
@vitejs/plugin-react
Advanced tools
The @vitejs/plugin-react package is a plugin for Vite that enables React fast refresh and other React-specific optimizations in a Vite project. It provides out-of-the-box configuration for a seamless development experience when working with React and Vite.
Fast Refresh
Enables React Fast Refresh, which allows you to get instant feedback for changes in your React components during development without losing component state.
import reactRefresh from '@vitejs/plugin-react';
export default {
plugins: [reactRefresh()],
};
JSX Transform
Automatically transforms JSX without the need for importing React in every file, thanks to the new JSX transform introduced in React 17.
import reactRefresh from '@vitejs/plugin-react';
export default {
plugins: [reactRefresh()],
};
Custom Babel Configuration
Allows for custom Babel configurations to be used alongside the plugin, enabling advanced use cases and compatibility with additional Babel plugins.
import reactRefresh from '@vitejs/plugin-react';
export default {
plugins: [reactRefresh({ babel: { plugins: ['@babel/plugin-syntax-dynamic-import'] } })],
};
A Webpack plugin that enables React Fast Refresh. It is similar to @vitejs/plugin-react in providing hot reloading capabilities but is specific to Webpack-based projects.
This Babel preset includes the necessary Babel plugins for React applications created with Create React App. It handles JSX transformation and other React optimizations but does not provide hot reloading on its own.
CRACO (Create React App Configuration Override) is an npm package that allows you to customize the Create React App configuration without ejecting. It can be used to modify Babel and Webpack configurations, similar to how @vitejs/plugin-react allows for custom configurations in a Vite project.
The default Vite plugin for React projects.
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
Includes .js
, .jsx
, .ts
& .tsx
by default. This option can be used to add fast refresh to .mdx
files:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from '@mdx-js/rollup'
export default defineConfig({
plugins: [
{ enforce: 'pre', ...mdx() },
react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
],
})
node_modules
are never processed by this plugin (but esbuild will)
Control where the JSX factory is imported from. Default to 'react'
react({ jsxImportSource: '@emotion/react' })
By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime
option.
react({ jsxRuntime: 'classic' })
The babel
option lets you add plugins, presets, and other configuration to the Babel transformation performed on each included file.
react({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
})
Note: When not using plugins, only esbuild is used for production builds, resulting in faster builds.
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:
react({
babel: {
parserOpts: {
plugins: ['decorators-legacy'],
},
},
})
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.
In middleware mode, you should make sure your entry index.html
file is transformed by Vite. Here's an example for an Express server:
app.get('/', async (req, res, next) => {
try {
let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')
// Transform HTML using Vite plugins.
html = await viteServer.transformIndexHtml(req.url, html)
res.send(html)
} catch (e) {
return next(e)
}
})
Otherwise, you'll probably get this error:
Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
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.
FAQs
The default Vite plugin for React projects.
The npm package @vitejs/plugin-react receives a total of 4,195,292 weekly downloads. As such, @vitejs/plugin-react popularity was classified as popular.
We found that @vitejs/plugin-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.