Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hot module reload is not working on my nextjs app

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

like image 545
Pranay Tripathi Avatar asked Dec 07 '22 10:12

Pranay Tripathi


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

like image 85
Pranay Tripathi Avatar answered Dec 31 '22 01:12

Pranay Tripathi


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

like image 28
Mohammed ali bin taleb Avatar answered Dec 31 '22 03:12

Mohammed ali bin taleb