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

Abscission

did you start it with yarn/npm dev? – Alfred

yes I m using yarn dev – Abscission

What do you try to change? – Windpollinated

@Windpollinated When ever I m updating my js file or style file, it doesnt reload the latest changes. – Abscission

Ham, long shot, maybe it is related to the fact that your pages contains upper case folders? – Windpollinated

well that works @Windpollinated – Abscission

WOW!? 🤩 glad it worked :] – Windpollinated

Answer 1

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.

Abscission

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 – Jeer

@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. – Brice

@Brice agreed, I only found this solution by trial and error :) – Jeer

I too was facing this issue, as my component/<filename> was in"kebab case" and the function name had the first letter in uppercase – Terle

Answer 2

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

Matronage

Answer 3

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.

Orford

This was my issue cheers – Pratt

This was the case for me too, thanks a lot. – Marable

This was it in my case – Loosejointed

This is exactly what happened to me as well. Thank you for that – Coontie

Answer 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.

Paradise

In my case, I removed the assetPrefix in my next.config.js file and now hot reloading is working now. – Andres

Answer 5

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

Osswald

It was the same case with me too, but in case of importing css – Beneficial

Answer 6

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.

Iulus

It worked. This is infuriating. Originally my project was on mnt/[my-disk]/folder and that allows you to run the project with no problem, but you don't have hot reload, and no errors are fired so you don't have a clue. – Footrace

Answer 7

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.

Dryly

For me removing .next folder and then running on Safari worked. – Brine

Answer 8

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

Mellon

Answer 9

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

Larkspur

Answer 10

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.

Palatial

Answer 11

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

Gemmulation

Answer 12

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

Rania

Answer 13

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.

Suffuse

Answer 14

I had Disable Javascript in my Chrome inspector

Hayman

Answer 15

Just in case you are using WSL2 then change your project path to \home directory that means if your project is present in path /mnt/c/Users/your-username/your-project change it to linux \home directory by creating a folder in it say mkdir -p ~/projects and then move a copy of your project linux file system by using command mv /mnt/c/Users/your-username/your-project ~/projects/ then navigate to the project by cd ~/projects/your-project and open this instance in vs code by using command code . and run the code by npm run dev

This worked for me hope it worked for you too

Specter

Answer 16

in my case it was working on both chrome and safari, but not on brave, just tried toggling between brave shields for localhost and shockingly , its only working when the brave shields are on for localhost! :O

Quite