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"]
}
I encountered this issue as well, what fixed it for me was removing the sub directory for each file inside pages directory.
├── src
│ ├── Components
│ ├── Pages
│ │ ├── Home
│ │ │ ├── Home.styled.jsx
│ │ │ ├── Index.jsx
│ │ ├── About
│ │ │ ├── About.styled.jsx
│ │ │ ├── Index.jsx
It worked when I changed my folder structure to this, and updated my App.jsx to the files directly:
So from this (./pages/Home/) to (./pages/Home.jsx)
├── src
│ ├── Components
│ ├── pages
│ │ ├── Home.jsx
│ │ ├── About.jsx
I was having this issue also and after reading the docs more carefully I realized that I only needed to add this to any of the js/ts files which vite is aware of (referenced in the index.html file) and it started working:
import.meta.hot