full page reload when component has been modified

Describe the bug

Changing single component using create-react-app will show immediate results meanwhile using vite, it triggers full page reload. On large application its very bad DX because it takes 6 seconds to see results on even small changes. Any ideas why this is happening ?

to reproduce: https://github.com/Digital-Coder/senf_client/tree/vite-senf-workspace download the zip cd apps/senf-workspace npm ci npm run vite:start change Navbar.jsx or any component.

https://user-images.githubusercontent.com/31192965/156156033-d61ba41d-6100-4eb4-adb7-6b9f050f99d4.mp4

Reproduction

https://github.com/Digital-Coder/senf_client/tree/vite-senf-workspace

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-4702MQ CPU @ 2.20GHz
    Memory: 14.20 GB / 23.88 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Spartan (44.19041.1023.0), Chromium (98.0.1108.62)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    vite: ^2.8.5 => 2.8.5

Used Package Manager

npm

Logs

10.59.41 [vite] page reload src/components/Navbar.jsx (x2)
  vite:spa-fallback Rewriting GET /login to /index.html +23s
  vite:time 6.37ms /index.html +23s
  vite:cache [304] /@vite/client +23s
  vite:time 2.64ms /@vite/client +121ms
  vite:load 1.04ms [fs] /src/index.jsx +23s
  vite:import-analysis 9.04ms [4 imports rewritten] src\index.jsx +23s
  vite:transform 11.68ms /src/index.jsx +23s
  vite:time 19.48ms /src/index.jsx +21ms
  vite:cache [memory] /node_modules/.vite/react.js?v=56423e51 +23s    
  vite:cache [memory] /node_modules/.vite/react-dom.js?v=56423e51 +0ms
  vite:cache [memory] /src/index.css +0ms
  vite:cache [304] /node_modules/vite/dist/client/env.mjs +25ms       
  vite:time 1.56ms /node_modules/vite/dist/client/env.mjs +4ms        
  vite:load 4.09ms [fs] /src/App.jsx +22ms
  vite:import-analysis 30.34ms [14 imports rewritten] src\App.jsx +44ms
  vite:transform 33.00ms /src/App.jsx +45ms
  vite:cache [memory] /node_modules/.vite/react.js?v=56423e51 +49ms
  vite:cache [memory] /src/App.css +1ms
  vite:cache [memory] /node_modules/.vite/react-router-dom.js?v=56423e51 +0ms
  vite:cache [memory] /src/pages/Register.jsx +0ms
  vite:cache [memory] /src/pages/Login.jsx +0ms
  vite:cache [memory] /src/context/auth.jsx +1ms
  vite:cache [memory] /src/components/PrivateRoute.jsx +0ms
  vite:cache [memory] /src/pages/Home.jsx +0ms
  vite:cache [memory] /src/pages/Profile.jsx +0ms
  vite:cache [memory] /node_modules/.vite/i18next.js?v=56423e51 +0ms
  vite:cache [memory] /node_modules/.vite/react-i18next.js?v=56423e51 +0ms   
  vite:cache [memory] /src/util/translations/english.json +0ms
  vite:cache [memory] /src/util/translations/german.json +1ms
  vite:cache [304] /node_modules/.vite/react.js?v=56423e51 +51ms
  vite:time 1.15ms /node_modules/.vite/react.js?v=56423e51 +51ms
  vite:cache [304] /node_modules/.vite/react-dom.js?v=56423e51 +1ms
  vite:time 0.98ms /node_modules/.vite/react-dom.js?v=56423e51 +2ms
  vite:cache [304] /src/index.css +2ms
  vite:time 1.25ms /src/index.css +2ms
  vite:cache [memory] /src/App.jsx +7ms
  vite:time 1.23ms /src/App.jsx +2ms
  vite:load 8.01ms [fs] /src/components/Navbar.jsx +55ms
  vite:import-analysis 13.75ms [6 imports rewritten] src\components\Navbar.jsx +40ms
  vite:transform 18.74ms /src/components/Navbar.jsx +40ms
  vite:cache [memory] /node_modules/.vite/react.js?v=56423e51 +26ms
  vite:cache [memory] /node_modules/.vite/react-router-dom.js?v=56423e51 +0ms
  vite:cache [memory] /src/firebase.js +1ms
  vite:cache [memory] /node_modules/.vite/@firebase_auth.js?v=56423e51 +1ms
  vite:cache [memory] /node_modules/.vite/firebase_firestore.js?v=56423e51 +0ms
  vite:cache [memory] /src/context/auth.jsx +1ms
  vite:cache [304] /src/App.css +116ms
  vite:time 1.80ms /src/App.css +114ms
  vite:cache [304] /node_modules/.vite/react-router-dom.js?v=56423e51 +3ms
  vite:time 2.06ms /node_modules/.vite/react-router-dom.js?v=56423e51 +3ms
  vite:cache [memory] /src/components/Navbar.jsx +91ms
  vite:time 2.24ms /src/components/Navbar.jsx +3ms
  vite:cache [304] /src/pages/Profile.jsx +7ms
  vite:time 1.95ms /src/pages/Profile.jsx +3ms
  vite:cache [304] /src/pages/Register.jsx +3ms
  vite:time 1.78ms /src/pages/Register.jsx +3ms
  vite:cache [304] /src/pages/Login.jsx +3ms
  vite:time 1.81ms /src/pages/Login.jsx +3ms
  vite:cache [304] /src/context/auth.jsx +5ms
  vite:time 4.56ms /src/context/auth.jsx +5ms
  vite:cache [304] /src/components/PrivateRoute.jsx +3ms
  vite:time 1.85ms /src/components/PrivateRoute.jsx +4ms
  vite:cache [304] /src/pages/Home.jsx +4ms
  vite:time 3.20ms /src/pages/Home.jsx +4ms
  vite:cache [304] /node_modules/.vite/i18next.js?v=56423e51 +6ms
  vite:time 2.82ms /node_modules/.vite/i18next.js?v=56423e51 +5ms
  vite:cache [304] /node_modules/.vite/react-i18next.js?v=56423e51 +3ms
  vite:time 2.40ms /node_modules/.vite/react-i18next.js?v=56423e51 +4ms
  vite:cache [304] /src/util/translations/english.json +5ms
  vite:time 3.92ms /src/util/translations/english.json?import +5ms
  vite:cache [304] /src/util/translations/german.json +6ms
  vite:time 3.22ms /src/util/translations/german.json?import +6ms
  vite:cache [304] /node_modules/.vite/chunk-6TRSVAMR.js?v=56423e51 +4ms
  vite:time 2.05ms /node_modules/.vite/chunk-6TRSVAMR.js?v=56423e51 +4ms
  vite:cache [304] /node_modules/.vite/chunk-RPC23XZB.js?v=56423e51 +3ms
  vite:time 1.39ms /node_modules/.vite/chunk-RPC23XZB.js?v=56423e51 +2ms
  vite:cache [304] /src/firebase.js +143ms
  vite:time 1.77ms /src/firebase.js +144ms
  vite:cache [304] /node_modules/.vite/@firebase_auth.js?v=56423e51 +3ms
  vite:time 1.57ms /node_modules/.vite/@firebase_auth.js?v=56423e51 +2ms
  vite:cache [304] /node_modules/.vite/firebase_firestore.js?v=56423e51 +2ms
  vite:time 1.30ms /node_modules/.vite/firebase_firestore.js?v=56423e51 +3ms
  vite:cache [304] /src/components/svg/Camera.jsx +81ms
  vite:time 2.36ms /src/components/svg/Camera.jsx +81ms
  vite:cache [304] /src/components/svg/Delete.jsx +3ms
  vite:time 2.16ms /src/components/svg/Delete.jsx +3ms
  vite:cache [304] /src/images/icons/icon-192.png +3ms
  vite:time 1.30ms /src/images/icons/icon-192.png?import +2ms
  vite:cache [304] /node_modules/.vite/firebase_storage.js?v=56423e51 +2ms
  vite:time 1.85ms /node_modules/.vite/firebase_storage.js?v=56423e51 +3ms
  vite:cache [304] /node_modules/.vite/firebase_auth.js?v=56423e51 +3ms
  vite:time 1.58ms /node_modules/.vite/firebase_auth.js?v=56423e51 +2ms
  vite:cache [304] /src/components/Loading.jsx +2ms
  vite:time 1.28ms /src/components/Loading.jsx +2ms
  vite:cache [304] /src/components/User.jsx +2ms
  vite:time 1.23ms /src/components/User.jsx +2ms
  vite:cache [304] /src/components/MessageForm.jsx +2ms
  vite:time 1.21ms /src/components/MessageForm.jsx +2ms
  vite:cache [304] /src/components/Message.jsx +2ms
  vite:time 1.16ms /src/components/Message.jsx +2ms
  vite:cache [304] /node_modules/.vite/firebase_app.js?v=56423e51 +170ms
  vite:time 1.99ms /node_modules/.vite/firebase_app.js?v=56423e51 +171ms
  vite:cache [304] /node_modules/.vite/chunk-44O5JT4F.js?v=56423e51 +3ms
  vite:time 1.89ms /node_modules/.vite/chunk-44O5JT4F.js?v=56423e51 +3ms
  vite:cache [304] /node_modules/.vite/chunk-KHRBHNGQ.js?v=56423e51 +3ms
  vite:time 1.52ms /node_modules/.vite/chunk-KHRBHNGQ.js?v=56423e51 +2ms
  vite:cache [304] /node_modules/.vite/chunk-NCXQELMD.js?v=56423e51 +2ms
  vite:time 2.82ms /node_modules/.vite/chunk-NCXQELMD.js?v=56423e51 +4ms
  vite:cache [304] /src/components/svg/Attachment.jsx +92ms
  vite:time 1.57ms /src/components/svg/Attachment.jsx +91ms
  vite:cache [304] /node_modules/.vite/@firebase_firestore.js?v=56423e51 +5ms
  vite:time 1.89ms /node_modules/.vite/@firebase_firestore.js?v=56423e51 +4ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[philals]

Followed @Digital-Coder advise and it works! Thanks

[Digital-Coder]

@desko27 apparently I was using legacy import reactJsx from "vite-react-jsx" plugin in my applications. All I had to do is to switch to @vitejs/plugin-react and HMR has been solved

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

export default defineConfig({
 plugins: [react()]
})