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

score 20 · Answer 1 · answered Jun 10 '22 at 15:36

20

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!

answered Jun 10 '22 at 15:36

disperse

1,216
10
22

1

I feel so stupid rn this of the solutions is what worked – Dylan Karimagoko Jun 21 '23 at 06:24
2

For future google arrivals: tsconfig.json has a field `forceConsistentCasingInFileNames` you want to set to `true` – Leon Adler Jul 03 '23 at 11:30

score 12 · Accepted Answer · answered Feb 05 '22 at 09:06

12

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.

answered Feb 05 '22 at 09:06

Mahdi-Jafaree

882
2
9
22

score 7 · Answer 3 · answered Jul 13 '22 at 07:15

7

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",
    }),
  ],
});

answered Jul 13 '22 at 07:15

Pedro Monteagudo

146
1
4

This worked for me perfectly. However, I use JS so I used ```include: "**/*.jsx"``` – TrevorDeTutor Mar 14 '23 at 09:39

score 4 · Answer 4 · answered Dec 07 '22 at 06:53

4

I have experienced this problem recently, here is a solution on how to fix it. If you are using .jsx files, you should modify the vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    // Add this line
    include: "**/*.jsx",
  })]
})

Or, if you are using typescript (.tsx), you can modify the vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    // Add this line
    include: "**/*.tsx",
  })]
})

Hope this solves your issues.

answered Dec 07 '22 at 06:53

Rokas Rudzianskas

582
1
7
10

Doesn't work for me... – RVFET Mar 23 '23 at 15:07
1

This worked for @vitejs react, if you are using something different, probably there is another problem. You can try in your vite.config.js to enable HMR, with adding the lines - server: { hmr: true }. This enables HMR. As well, try to clear the npm or yarn cache, sometimes that is the issue as well. – Rokas Rudzianskas Mar 24 '23 at 07:30
I found the solution just a few minutes after writing this comment. I somehow named the `pages` folder `Pages` and this was the issue in my case. Strange enough instead of showing an error vite continues to run the server with hotreload not working – RVFET Mar 28 '23 at 11:24
2

Glad you managed to solve it, have a nice day :) – Rokas Rudzianskas Mar 29 '23 at 05:18

jaksco · Answer 5 · 2023-04-20T03:25:44.470

1

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

edited Apr 20 '23 at 03:25

answered May 28 '22 at 03:36

jaksco

423
7
18

where did you add it to? – Alex May 28 '22 at 13:13
I updated the answer to be more clear – jaksco May 28 '22 at 15:31
`where did you add it to` Still not clear? @jaksco – dipenparmar12 Apr 17 '23 at 05:51
1

add the line to any of the `.js` or `.ts` files which vite is aware of. for example if you have an `index.html` file you can create a regular `.js` file and reference the file in a normal `script` tag – jaksco Apr 20 '23 at 03:23

Victor Eke · Answer 6 · 2023-03-08T05:23:36.147

0

What fixed it for me was removing the subdirectory for each file inside the pages directory. Reference

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

edited Mar 08 '23 at 05:23

answered Apr 09 '22 at 19:19

Victor Eke

109
6

1

for what it's worth your old folder structure was incorrect, it might be that you didn't know because you're on a case insensitive filesystem. the index files should be `index.jsx` not `Index.js`... (additionally it's bad practice to use `index.jsx` implying you've defined react components in your index file, just name them `index.js` and only put exports in there. – airtonix May 06 '22 at 10:54
Can't believe I missed that. Thanks @airtonix – Victor Eke May 07 '22 at 12:40

score 0 · Answer 7 · answered Oct 06 '22 at 05:12

0

Check your tsx filename's first letter is uppecase!

component.tsx -> Component.tsx

answered Oct 06 '22 at 05:12

Sunghyun Cho

689
5
8

score 0 · Answer 8 · answered Oct 22 '22 at 10:17

0

I am also facing this problem I just run npm install after that issue fixed

answered Oct 22 '22 at 10:17

Mr. G

39
3

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/33004747) – L8R Oct 27 '22 at 17:30

score 0 · Answer 9 · edited Mar 03 '23 at 18:25

0

Make sure that the import name of the component Is the same as the name of the file where this component lives:

This works:

import NewReleases from '../components/homepageComps/NewReleases'

This does not:

import NewReleases from '../components/homepageComps/OtherNameHere'

edited Mar 03 '23 at 18:25

William Brochensque junior

2,385
18
35
46

answered Feb 27 '23 at 14:53

Adnan 2Shiro

31
1

score 0 · Answer 10 · answered Apr 03 '23 at 12:32

I'm working in my first vite react project and coming from cra it was my habit to use functional "arrow" components.

const funcName = () => {...}

As soon as I saw the App.jsx had normal function, I changed it to an arrow function.

from this function App() {...} to this const App = () => {...}

Right from the beginning of the project none of my updates were updated in the browser. I'd to cancel and start the server again to see the updates.

After changing it back to normal function my hmr started working fine.

So as of now, April 2023, the App component must be written in the following manner:

function App() {...}

score 0 · Answer 11 · answered Jul 21 '23 at 02:26

0

To enable the hot reload, you need to put this configuration in your vite.config.ts

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true
    }
  }
})

answered Jul 21 '23 at 02:26

alvescleiton

1,063
11
8

enable hot reload for vite react project instead of page reload

11 Answers11

My previous folder structure:

Fix