Have to restart the Next.js dev server to view any changes

Question

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?

Answer 1

In my experience, this occurs when your source is on a Windows drive (e.g. /mnt/c) since the driver that WSL uses for those drives doesn't yet support inotify. See this answer for more details on a related issue.

There are at least two possible solutions:

• The recommended solution if you need WSL2 is to place your files on the ext4 root filesystem for WSL. E.g. somewhere under /home/, for instance. This has the added advantage of being much faster than the Windows drive.

• Or you can convert your instance to WSL1, which does support inotify on the Windows drives, and is much faster when dealing with files there. You can also keep a WSL1 and a WSL2 copy around if you want. They both serve different purposes, but for most web framework development, I think you'll find WSL1 a better fit.

  You can back up your existing distribution with wsl --export <distroname> <filename.tar>, and then change to WSL1 with wsl --set-version <distroname> 1. Or you can re-import the backup as wsl --import <newDistroName> <directory> <filename.tar> --version 1.

• Some Node dev servers in use by frameworks can be set to poll for file changes rather than being notified by inotify. While I don't have direct experience with Next.js, check the documentation to see if there's a way to enable polling.