NextJS does not support file change events in WSL2's new protocol (9P)

[BiscuiTech]

Bug report

Describe the bug

File change events are not received by HMR, thus making HMR completely unsuable. Changes are not reflected.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Take any project working on next 9.
2. Have Windows 10 Insiders Fast Ring
3. Install WSL2 Ubuntu
4. run next dev or now dev
5. Make a change in your files
6. HMR does not kick in. You have to reload the whole command.

Expected behavior

HMR should read file change events from the 9P protocol in WSL2

System information

• OS: Windows 10 Insiders Fast build 18980
• Version of Next.js: latest - 9.0.5

[elias551]

The problem might not be related to nextjs, I get a similar problem using nodemon with wsl, I could solve it using polling instead of subscribing to fs events (there is a --poll flag in nodemon).

For reference: remy/nodemon#1187 (comment)

[mattiascibien]

I notice that I have the same problem when using a VSCode .devcontainer inside docker with the WSL backend.

[ivancuric]

Working normally here, running 19041.172, WSL2 on Ubuntu 18.04 and VScode + remote.

[skivol]

Yes, HMR works fine for files which live inside the WSL2 virtual machine (that is not on "/mnt/..." prefixed path) and when I moved my project files inside VM (had also to run "IntelliJ IDEA" from the inside as well to have more powerful kotlin tooling when needed) I was amazed by the difference in build and shell/git performance, so highly recommend this approach instead! (apart from the fact that your tooling can live completely inside WSL2 Linux VM 👍 )

[BiscuiTech]

This issue has been fixed by Microsoft by expanding their new protocol. Has not occured for a while now, so I'll close this.

[jose-verissimo]

For anyone still lurking this thread, what worked for me on WSL2 and the latest version of Next.js was simply putting the project files inside any directory apart from /mnt/.

So I created a folder inside ~/Sites/ with my project and then ran the following command to find out the path in Windows explorer.exe .

I then opened that folder in VSCode and the file changes are now being registered and automatically updates my browser styles.

I got the solution in the following thread: remy/nodemon#1187 (comment)

[Rechdan]

I have Windows 10 and the command next does not listen for file changes when using docker-compose, here is the setup:

Docker Compose file:

version: '3.8'

services:
  nextjs:
    image: node:14.15.0-alpine3.12
    working_dir: /app
    entrypoint: sh -c "npm i && npm run dev"
    ports:
      - '3000:3000'
    volumes:
      - ../web-client/.babelrc:/app/.babelrc
      - ../web-client/package.json:/app/package.json
      - ../web-client/tsconfig.json:/app/tsconfig.json
      - ../web-client/src:/app/src

Package JSON:

{
	"scripts": {
		"dev": "next dev"
	},
	"dependencies": {
		"next": "10.0.2"
	}
}