Closed Digital-Coder closed 2 years ago
NovaAndrom3da
commented
2 years ago This is due to HMR. This allows for changes in the server without having to restart it. You can disable HMR by appending/modifying your vite.config.ts file:
export default defineConfig({
server {
hmr: false,
},
});This makes it so that websites delivered by the server don't reload themselves.
Digital-Coder
commented
2 years ago This is due to HMR. This allows for changes in the server without having to restart it. You can disable HMR by appending/modifying your
vite.config.tsfile:export default defineConfig({ server { hmr: false, }, });This makes it so that websites delivered by the server don't reload themselves.
Disabling HMR does not help because then you wont see changes on the screen. Normally vite detects a change in a single component and it updates screen without restarting the whole application.
In my provided github repo, something breaks HMR so that it detects a change in a single component,but instead of updating component, it reloads the application. Reloading the whole app is very slow for a large codebase.
when that app was using react-scripts@4.0.3, HMR was working as expected.
desko27
commented
2 years ago I just realised this today in my app and it turns out this also happens when creating a new vite react app from scratch.
Downgrade to vite@2.6 and HMR works again:
The issue appears from vite@2.7.0 onwards as far as I can see.
Digital-Coder
commented
2 years ago I just realised this today in my app and it turns out this also happens when creating a new vite react app from scratch.
Downgrade to vite@2.6 and HMR works again:
The issue appears from vite@2.7.0 onwards as far as I can see.
oh interesting ! I will test it tomorrow
Digital-Coder
commented
2 years ago @desko27 apparently I was using legacyimport 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()]
})
philals
commented
2 years ago Same issue for us. A downgrade to 2.5.10 fixed
philals
commented
2 years ago Followed @Digital-Coder advise and it works! Thanks
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
Used Package Manager
npm
Logs
Validations