title: enable hot reload for vite react project instead of page reload
body: <p>I am new to vite and I just started a new react application. My project had hmr (hot module replacement) enabled and it was ok. I just added some changes but when I start it now the hmr is disabled and when adding new change the browser is reloading (not updating fast) and in the terminal it logs:
  <code>12:37:54 PM [vite] page reload src/App.tsx</code>
  I created a new test application and it has hmr enabled and when I add any change it logs:
  <code>12:35:23 PM [vite] hmr update /src/App.tsx (x2)</code>
  Can any you tell me how to enable hmr instead of page reload?</p>
  <p>Here is my <code>vite.config.ts</code> for project that logs <code>page reload</code></p>
  <pre><code>import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [react()]
  })
  </code></pre>
  <p>and also <code>tsconfig.json </code> for project that logs <code>page reload</code></p>
  <pre><code>
  {
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;ESNext&quot;,
      &quot;useDefineForClassFields&quot;: true,
      &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ESNext&quot;],
      &quot;allowJs&quot;: false,
      &quot;skipLibCheck&quot;: false,
      &quot;esModuleInterop&quot;: false,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: false,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;ESNext&quot;,
      &quot;moduleResolution&quot;: &quot;Node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react-jsx&quot;
    },
    &quot;include&quot;: [&quot;./src&quot;]
  }
  </code></pre>