Hot module reload is not working on my nextjs app

user_5647301 0
Viewed 22368

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

Project Structure

server-side-rendering next.js reactjs
9 Answers

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.

user_56473010

I just solve this problem just by delete folder ".next" and then close terminal and run again npm run dev it will works

user_101655870

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.

user_75651060

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
user_37876350

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.

user_140755280

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

user_24956190

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.

user_192056800

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.

user_74421690

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

user_196538560
Related