First off, another question, #71649994, pretty much asks the same question, except that while they only say it happens for one of their projects, in my case it happens for every project that I've ever created, and in that question's case, there was no solution, so I thought I'd ask again and add additional details.
In my case, fast reloading, or even just hot-reloading/rebuilding the page and refreshing when I update my code, just does not work at all. Nothing happens when I change my code. When I create a basic next app using npx create-next-app@latest, and then run the dev server using npm run dev, updating files like pages/index.js does not do anything, including basic changes like changing the page title tag. There is no output in the terminal from the server in response to me saving the file.
I've experienced this on two separate computers, both with TypeScript and with normal JavaScript. One computer runs Windows 10, the other Windows 11, but for both my development environment is WSL2 Ubuntu, and I am using VScode.
There is a slight difference between my experience on some projects. On the typescript project, modifying CSS files (not CSS modules) that I've imported globally did actually seem to work with fast refresh, including terminal output as well as a loading icon on the page indicating the fast refresh took place. However, when following the process above to create the default JS project, no aspect of fast refresh seems to work. No change seems to trigger a refresh or response, and refreshing the page does not do anything.
To clarify, when I run npm run dev, npx next dev or yarn dev, the initial build runs just fine. I also have no issues with the typescript compiler or sass compilers, meaning that when I run tsc *.ts --watch in a directory, it always compiles TypeScript code into JS without a hitch when I modify those files, and the case is the same when I am working with .scss files.
I can also start a production server with npm run start, again without a hitch.
Versions of some of the software I'm running:
- next 12.2.4
- vscode 1.70.0
- Ubuntu 20.04.3 LTS
package.json
{
"name": "js_web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"npm": "^8.16.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.21.0",
"eslint-config-next": "12.2.4"
}
}
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
It's hard to say whether it could be related or not, but I've also had issues with getting EACCESS/permissions errors when trying to install npm packages globally, which has required me to use sudo to get them to actually install. Since I've experienced this issue and the NextJS issue on both computers, could this point to an issue with the way I've configured things on both machines, leading to the NextJS issue?
Does anyone with a similar setup not experience this issue? Are there any additional details that I could investigate to try and identify the issue?
Finally, is it possible to enable additional debug output, if it could be helpful?
Copyright Notice：Content Author:「GenericallyNamed」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/73296262/have-to-restart-the-next-js-dev-server-to-view-any-changes