Soy nuevo en vite y acabo de comenzar una nueva aplicación de reacción. Mi proyecto tenía habilitado hmr (reemplazo de módulo en caliente) y estaba bien. Acabo de agregar algunos cambios, pero cuando lo inicio ahora, el hmr está deshabilitado y al agregar un nuevo cambio, el navegador se vuelve a cargar (no se actualiza rápidamente) y en la terminal registra: 12:37:54 PM [vite] page reload src/App.tsx una nueva aplicación de prueba y tiene hmr habilitado y cuando agrego cualquier cambio, registra: 12:35:23 PM [vite] hmr update /src/App.tsx (x2) ¿Puede decirme cómo habilitar? hmr en lugar de recargar la página?
Aquí está mi vite.config.ts para el proyecto que registra la page reload
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()] }) y también tsconfig.json para el proyecto que registra la 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"] }También encontré este problema, lo que me solucionó fue eliminar el subdirectorio para cada archivo dentro del directorio de páginas.
├── src │ ├── Components │ ├── Pages │ │ ├── Home │ │ │ ├── Home.styled.jsx │ │ │ ├── Index.jsx │ │ ├── About │ │ │ ├── About.styled.jsx │ │ │ ├── Index.jsxFuncionó cuando cambié mi estructura de carpetas a esto y actualicé mi App.jsx a los archivos directamente:
Así que de esto (./pages/Home/) a (./pages/Home.jsx)
├── src │ ├── Components │ ├── pages │ │ ├── Home.jsx │ │ ├── About.jsxTambién estaba teniendo este problema y después de leer los documentos con más cuidado, me di cuenta de que solo necesitaba agregar esto a cualquiera de los archivos js/ts de los que vite está al tanto (al que se hace referencia en el archivo index.html) y comenzó a funcionar:
import.meta.hot