Nupital Pomp Mesmerises

    @vitejs/plugin-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.2 • Public • Published

    @vitejs/plugin-react npm

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

    • enable Fast Refresh in development
    • use the automatic JSX runtime
    • avoid manual import React in .jsx and .tsx modules
    • dedupe the react and react-dom packages
    • use custom Babel plugins/presets
    // vite.config.js
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()]
    })

    Filter which files use Fast Refresh

    By default, Fast Refresh is used by files ending with .js, .jsx, .ts, and .tsx, except for files with a node_modules parent directory.

    In some situations, you may not want a file to act as a HMR boundary, instead preferring that the changes propagate higher in the stack before being handled. In these cases, you can provide an include and/or exclude option, which can be a regex, a picomatch pattern, or an array of either. Files matching include and not exclude will use Fast Refresh. The defaults are always applied.

    react({
      // Exclude storybook stories
      exclude: /\.stories\.(t|j)sx?$/,
      // Only .tsx files
      include: '**/*.tsx'
    })

    Opting out of the automatic JSX runtime

    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'
    })

    Babel configuration

    The babel option lets you add plugins, presets, and other configuration to the Babel transformation performed on each JSX/TSX 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,
      }
    })

    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:

    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.

    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:

    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.
    

    Keywords

    none

    Install

    npm i @vitejs/plugin-react

    DownloadsWeekly Downloads

    316,879

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    59.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • vitebot
    • yyx990803
    • patak
    • antfu