NeXTSTEP Programming Mastermind

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

    1.3.6 • Public • Published

    @vitejs/plugin-react-refresh npm

    Provides React Refresh support for Vite.

    // vite.config.js
    import reactRefresh from '@vitejs/plugin-react-refresh'
    
    export default {
      plugins: [reactRefresh()]
    }

    Specifying Additional Parser Plugins

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

    export default {
      plugins: [
        reactRefresh({
          parserPlugins: ['classProperties', 'classPrivateProperties']
        })
      ]
    }

    Full list of Babel parser plugins.

    Specifying files to include or exclude from refreshing

    By default, @vite/plugin-react-refresh will process files ending with .js, .jsx, .ts, and .tsx, and excludes all files in node_modules.

    In some situations you may not want a file to act as an 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 regex or a picomatch pattern, or array of either. Files must match include and not exclude to be processed. Note, when using either include, or exclude, the defaults will not be merged in, so re-apply them if necessary.

    export default {
      plugins: [
        reactRefresh({
          // Exclude storybook stories and node_modules
          exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
          // Only .tsx files
          include: '**/*.tsx'
        })
      ]
    }

    Notes

    • If using TSX, any TS-supported syntax will already be transpiled away so you won't need to specify them here.

    • This option only enables the plugin to parse these syntax - it does not perform any transpilation since this plugin is dev-only.

    • If you wish to transpile the syntax for production, you will need to configure the transform separately using @rollup/plugin-babel as a build-only plugin.

    Middleware Mode Notes

    When Vite is launched in Middleware Mode, you need to make sure your entry index.html file is transformed with ViteDevServer.transformIndexHtml. Otherwise, you may get an error prompting Uncaught Error: @vitejs/plugin-react-refresh can't detect preamble. Something is wrong.

    To mitigate this issue, you can explicitly transform your index.html like this when configuring your express server:

    app.get('/', async (req, res, next) => {
      try {
        let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')
        html = await viteServer.transformIndexHtml(req.url, html)
        res.send(html)
      } catch (e) {
        return next(e)
      }
    })

    Keywords

    none

    Install

    npm i @vitejs/plugin-react-refresh

    DownloadsWeekly Downloads

    77,515

    Version

    1.3.6

    License

    MIT

    Unpacked Size

    16.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • yyx990803
    • patak
    • antfu