Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

486
Vistas
enable hot reload for vite react project instead of page reload

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"]
}
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar

0

I encountered this issue as well, what fixed it for me was removing the sub directory for each file inside pages directory.

My previous folder structure:

├── src
│   ├── Components
│   ├── Pages
│   │   ├── Home
│   │   │   ├── Home.styled.jsx
│   │   │   ├── Index.jsx
│   │   ├── About
│   │   │   ├── About.styled.jsx
│   │   │   ├── Index.jsx

Fix

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
about 4 years ago · Juan Pablo Isaza Denunciar

0

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
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda