[vite] hmr update /src/App.tsx
// But changes don't appear in the browser

Vite’s hot module replacement should update instantly, but sometimes it stops working.

Fix 1: Full Page Reload Instead of HMR

// ❌ Exporting non-component values breaks React Fast Refresh
export const API_URL = 'https://...';  // 💥 Mixed exports
export default function App() { return <div /> }

// ✅ Keep components in separate files from constants
// App.tsx — only the component
// config.ts — constants

Fix 2: File Watcher Limit (Linux)

# ❌ Too many files to watch
# ✅ Increase the limit
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

Fix 3: Docker / WSL Network Issues

// vite.config.ts — force polling in Docker/WSL
export default {
    server: {
        watch: {
            usePolling: true,
        },
    },
};

Fix 4: Wrong File Extension

# ❌ Vite doesn't know how to handle the file
# ✅ Make sure you're using supported extensions
# .tsx, .jsx, .ts, .js, .css, .scss, .json

Fix 5: Clear Cache

# Delete Vite's cache
rm -rf node_modules/.vite
npm run dev

Fix 6: Check Browser Console

# Look for WebSocket errors in browser DevTools
# If you see "WebSocket connection failed":

# vite.config.ts — fix HMR connection
export default {
    server: {
        hmr: {
            host: 'localhost',
            port: 5173,
        },
    },
};

Related resources

• What is Vite?
• Vite failed to resolve import fix
• Vite vs Webpack