Hot module reload is not working on my nextjs app - reactjs

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

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.

Answer 2

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

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.

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.

Answer 5

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.

Answer 6

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

Answer 7

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

Answer 8

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.

Answer 9

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

Answer 10

you need to run npm run dev instead npm run start