Hot module reload is not working on my nextjs app

Question

I have a project based on nextjs. Oddly enough, the HMR is not working properly for my project. Every time I make changes I have to re run the process. I have attached details of my next config and package.json:

next.config:

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    }
  })
);

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^3.26.8",
    "chartjs": "^0.3.24",
    "classnames": "^2.2.6",
    "draft-js": "^0.11.4",
    "isomorphic-unfetch": "^3.0.0",
    "moment": "^2.24.0",
    "next": "^9.2.1",
    "node-sass": "^4.13.1",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-helmet": "^5.2.1",
    "react-markdown": "^4.3.1",
    "react-mde": "^8.1.0",
    "react-redux": "^7.2.0",
    "react-select": "^3.0.8",
    "react-slick": "^0.25.2",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "showdown": "^1.9.1",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-react": "^7.18.3",
    "url-loader": "^3.0.0"
  }

I have tried removing node_modules and reinstalling again as well, doesnt seem to fix the issue.

Following is my project structure

@felixmosh When ever I m updating my js file or style file, it doesnt reload the latest changes. — Pranay Tripathi, Apr 04 '20 at 21:33
Ham, long shot, maybe it is related to the fact that your pages contains upper case folders? — felixmosh, Apr 04 '20 at 21:42

score 31 · Accepted Answer · answered Apr 09 '20 at 23:11

31

Got help from @felixmosh. There was issue because of my folders were case was not matching route case. Fixed the issues by changing folder name to route names.

answered Apr 09 '20 at 23:11

Pranay Tripathi

1,614
1
16
24

12

Yes, the casing matters inside of the `/pages` directory. If you try to hit `/users` and your directory structure looks like `pages/Users`, the page will render, but will not hot reload. Hope this helps someone – Stephen Burke May 22 '20 at 16:29
@StephenBurke is this documented somewhere? I could only find mention in a GitHub thread, but this is the kind of thing that should be featured in bold letters within the API docs. – bsplosion Mar 31 '22 at 23:28
@bsplosion agreed, I only found this solution by trial and error :) – Stephen Burke Apr 01 '22 at 18:38
I too was facing this issue, as my component/ was in"kebab case" and the function name had the first letter in uppercase – Souvik Guria Jan 10 '23 at 11:11

score 21 · Answer 2 · edited Jan 24 '23 at 13:26

21

I just solved this problem by deleting folder ".next" and then closing terminal, and run npm run dev again.

edited Jan 24 '23 at 13:26

Mark Rotteveel

100,966
191
140
197

answered Feb 02 '22 at 12:34

Mohammed ali bin taleb

211
3
3

score 8 · Answer 3 · answered Sep 09 '21 at 12:54

8

Sometimes, when you accidentally name a component starting with a lowercase and then later changes to capital letter, next cache will still consider the older name and won't count it as a normal component. The easiest solution is to copy the contents of the components, delete the file, and create one with a proper component name.

answered Sep 09 '21 at 12:54

Agneesh Bose

211
3
4

This was my issue cheers – Jamie Burke Dec 27 '22 at 13:41
This was the case for me too, thanks a lot. – Yuniac Jan 19 '23 at 08:32
This was it in my case – Nismi Mohamed Apr 26 '23 at 02:11
This is exactly what happened to me as well. Thank you for that – Rafat Rashid Rahi Jun 23 '23 at 21:40

score 4 · Answer 4 · answered May 26 '22 at 10:18

4

in my case hot reload didn't work because there was assetsPrefix in my next.config.js. You can remove or change them to "/" in the development mode and everything will be as expected.

answered May 26 '22 at 10:18

Aliaksei Hudzimchyk

41
1

score 1 · Answer 5 · answered Jun 27 '22 at 03:45

1

In my case, it wasn't working on Chrome. But it was working on Edge browser. And funny enough... even on a guest chrome window.

So all I had to do was...

Clear the cookies and hard refresh.

answered Jun 27 '22 at 03:45

Shubham Kushwah

545
1
9
16

score 1 · Answer 6 · answered Mar 10 '23 at 05:28

for me the solution was wrong in importing the the header component /src/sections/header.tsx in my /src/pages/index.tsx i was importing it like this
import { HeaderSection } from '../sections/Header'; all what i did to fix this issue is to make the import like this
import { HeaderSection } from '../sections/header';

note

both the projects will work fine but with the first one the Hot reload will not work until you re run your dev server

score 0 · Answer 7 · answered Mar 21 '21 at 01:48

For people NOT using modules and using Typescript paths.

For my setup, I just like having general .scss files

So, in my _app.tsx

I add Styles/index.scss

Then, in my index.scss

I add my @import '~Styles/flex.scss'

take note of the ~

this was required for it to work with hot reloading.

score 0 · Answer 8 · answered Aug 29 '21 at 16:23

Wrt to Next js version 10+ and in addition to Pranay's answer, make sure your routes case matches the case of the folder.

Also, I noticed the component name has to start with the upper case. If your file name is dashboard.jsx, the component name should be Dashboard.

// home/dashboard.js

const Dashboard = () => {

....

}
export default Dashboard

score 0 · Answer 9 · answered Jan 28 '22 at 04:47

0

I had to go to package.json remove react and react-dom and re add them with yarn add.

answered Jan 28 '22 at 04:47

MomasVII

4,641
5
35
52

score 0 · Answer 10 · answered Jul 30 '22 at 13:19

0

Force audit fix worked for me. Don't know the exact reason, might be some conflicts between dependencies.

Steps

1)Run this command in your next project directory. npm audit fix --force

answered Jul 30 '22 at 13:19

Abdul Rauf

1

score 0 · Answer 11 · answered Mar 25 '23 at 23:01

Oh for the love of All!

I just realised that my hot reload of imported component was not working because of the CAPITAL LETTER OF THE FOLDER!?!?

I did this:

src/components/MyTopBar/MyTopBar.tsx

so BOTH the name of the folder and the name of component were starting with capital letters. I imported component - it showed up when i did yarn dev and all rendered ok but when i changed anything in the MyTopBar.tsx the change would NOT WORK - no reload / no refresh. Had restart yarn dev to see changes.

So when i changed to this:

src/components/myTopBar/MyTopBar.tsx

the folder name inside the components starts with small letter and inside it the component name starts with capital letter.

ALL IS WORKING FINE! Hot reloads / styled-components changes / content changes - all is now shown properly.

Hope it helps! Did i completely forgot some basic rule of naming or is it next.js thingy?

score 0 · Answer 12 · answered Jun 01 '23 at 20:11

the problem is naming component files , make sure for route folders you are using page.js and lower case to all files in them, make sure the component name is uppercase, after doing all this terminate your server close your code editor and delete your .next folder because next had cache those previous names, open the code editor and run the server again . it will work

score 0 · Answer 13 · answered Jun 03 '23 at 00:13

For anyone else that encounters this problem and is using WSL, hot reload does not seem to work if your app is sitting on one of your Windows volumes. You can work around this by moving the entire app to one of your WSL volumes. (i.e. make it a subdirectory of /home/src or the like)

This does present a new problem, which is now your Windows system has to be able to see your app's folder to make changes. There are a number of ways to do this, but if you're using VS Code you can connect directly to WSL from inside the IDE.

score 0 · Answer 14 · answered Jun 16 '23 at 09:12

0

Make sure that in the layout.js you return something like this
return ( <html lang="en"> <body> <Navbar /> {children} </body> </html> );

IT wasn't working for me untill i added the html and body tags.

answered Jun 16 '23 at 09:12

Abdelilah Achir

1

score 0 · Answer 15 · answered Aug 12 '23 at 16:23

0

I had Disable Javascript in my Chrome inspector

answered Aug 12 '23 at 16:23

Kirk Strobeck

17,984
20
75
114

score -1 · Answer 16 · answered May 08 '23 at 20:37

-1

if your component is something like Test.jsx convert it to TestComponent.jsx should not be jest one word , use it like this

answered May 08 '23 at 20:37

Amo Oniani

15
3

1

"_use it like this_" - like... what? – starball May 08 '23 at 21:01

score -2 · Answer 17 · edited Jan 16 '23 at 17:33

-2

you need to run npm run dev instead npm run start

edited Jan 16 '23 at 17:33

Fedor

17,146
13
40
131

answered Jan 15 '23 at 13:18

Andres Cordova

1

4

Why? Your answer should contain some information on the difference between the two and why one will work when the other doesn't – camille Jan 19 '23 at 16:10
While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Shawn Hemelstrand Jan 27 '23 at 01:20

Hot module reload is not working on my nextjs app

17 Answers17

note

Linked