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:
12:37:54 PM [vite] page reload src/App.tsx
I created a new test application and it has hmr enabled and when I add any change it logs:
12:35:23 PM [vite] hmr update /src/App.tsx (x2)
Can any you tell me how to enable hmr instead of page reload?
Here is my vite.config.ts
for project that logs page reload
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
and also tsconfig.json
for project that logs page reload
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["./src"]
}
After following the searching; I found this link. The problem is if any of exports are named exports like export const foo = 12
this will break hmr. so after changing to export default function FooBar(){}
hmr is working.