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
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.
I just solve this problem just by delete folder ".next" and then close terminal and run again npm run dev it will works 👍
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With