Vite and React: stop using "react-refresh"

Question

Whenever I run npm start in my project I get the following message:

[@vitejs/plugin-react] You should stop using "react-refresh" since this plugin conflicts with it.

Vite seems to work fine regardless, but I was wondering if / how I should disable "react refresh"

Answer 1

Check your vite.config.js file. Since you are using @vitejs/plugin-react, you should see something like this (plus any other configuration):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-macros', ... (plugins here)],
      },
    }),
  ],
});

In the plugin array, if you have reactRefresh(), this means you are using @vitejs/plugin-react-refresh as well as @vitejs/plugin-react. This is unnecessary since plugin-react has hot refresh built-in and customisable. It probably won't break your code as far as I know but you can safely delete it.