enable hot reload for vite react project instead of page reload

Question

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"]
}

user_9341824 · Answer

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.

user_1283979 · Answer

The solution for me was making sure the case of the component file name matched the import so:

import Login from "../components/Login.vue";

when the file name was LogIn.vue resulted in the login component not reloading on changes (without an error). Changing the import to:

import Login from "../components/LogIn.vue"

fixed the problem!

user_14021166 · Answer

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

user_9405606 · Answer

In my case I'm using typescript and the solution was to set the vite.config.js react plugin like indicated in this Github comment: https://github.com/vitejs/vite/discussions/4577#discussioncomment-2320990

which is basically this:

export default defineConfig({
  plugins: [
    react({
      include: "**/*.tsx",
    }),
  ],
});

which is basically this:

export default defineConfig({
  plugins: [
    react({
      include: "**/*.tsx",
    }),
  ],
});

user_697964 · Answer

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

enable hot reload for vite react project instead of page reload

5 Answers

My previous folder structure:

Fix