Configure Vite Hot Module Replacement to Preserve UI State

Desired outcome

When you edit a source file during development, Vite's Hot Module Replacement (HMR) updates only the changed module in the browser while keeping the existing application state (e.g., form values, scroll position) intact.

Prerequisites

• A project initialized with Vite (e.g., npm create vite@latest my-app -- --template vanilla or any framework template).
• Node.js ≥14 and a package manager (npm, yarn, or pnpm).
• The Vite development server running (vite dev or vite).

Procedure

1. Open the module you want to make HMR‑aware. This could be a JavaScript file, a Vue SFC, or a React component.
2. Add a check for the HMR API provided by Vite:

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Optional: run logic when the module is accepted.
    // newModule is the updated module object.
  });
}

1. If the module holds state that must be cleaned up before replacement, provide a dispose handler:

if (import.meta.hot) {
  import.meta.hot.dispose((data) => {
    // Clean up timers, event listeners, or subscriptions.
    // Example: clearInterval(timerId);
  });
  import.meta.hot.accept((newModule) => {
    // Re‑initialize state using the new module if needed.
  });
}

1. Save the file. The Vite dev server will push a message over the WebSocket connection, the browser will invalidate the module, and the accept callback will run.

Expected checks

• Open the browser console; after saving you should see a log similar to [vite] hot updated: /src/example.js.
• Verify that UI state you expect to persist (e.g., text in an <input>) remains unchanged after the update.
• In the DevTools Network tab, filter by JS and confirm that only the modified file (and its imports) is requested; no full bundle reload occurs.

Recovery options

• If the console shows an error and the page reloads, check that the module does not contain syntax errors and that any disposed resources are properly cleared.
• To temporarily disable HMR, add server: { hmr: false } to vite.config.js and restart the dev server.
• If a dependency lacks ESM support, install @vitejs/plugin-legacy or configure optimizeDeps to include it.