Fast Refresh with Next.js development mode in VS Code Remote Container/devcontainer

[bennettdams]

Describe the feature you'd like to request

I can't get Next.js' Fast Refresh feature to work with a VS Code Remote Container. I can run npm run dev and see the app running on localhost on my machine, so the container works fine - only the Fast Refresh has no effect at all.

Next.js version: v11.0.1
I tried this both with Windows 10 and Ubuntu 20.04 (on WSL 2).

---

I already tried to use a custom webpack middleware in the next.config.js like so (see #2179 (comment)):

module.exports = {
    webpackDevMiddleware: (config) => {
        // Solve compiling problem via vagrant
        config.watchOptions = {
            poll: 1000,   // Check for changes every second
            aggregateTimeout: 300,   // delay before rebuilding
        };
        return config;
    },
};

...which will trigger a recompile on code changes, but the browser does not update.
Also, the requests to "HMR" are failing:

---

How to reproduce:

1. Install the Remote Containers extension
2. Open any new folder
3. Open the command palette and type/select "Remote-Containers: Rebuild and Reopen in Container"
4. Type/select "Node.js"
5. Type/select version "16" and wait for the container to start
6. Go to the .devcontainer folder and open the devcontainer.json
7. Edit the config by adding "forwardPorts": [3002], to make the app available on your host and rebuild the container (via VS Code's command palette)
8. From the terminal, install Next.js, e.g.: npx create-next-app --use-npm --example with-typescript-eslint-jest my-app
9. Move all the files from my-app to your VS Code project root folder. This has to be done because create-next-app does not work installing in the project root folder via ., because there's already the .devcontainer folder.
10. Optional: Create a next.config.js and add the snippet for the Webpack dev middleware as seen above
11. Edit the package.json script to use a specific port: "dev": "next dev -p 3002", (or, if you use WSL 2: next dev -p 3002 -H ::)
12. From the terminal, start the app npm run dev
13. Open the browser on http://localhost:3002
14. The app is showing. Make changes in the code -> even a recompiled app will not show the changes in the browser. A reload of the page in the browser will show the changes though.

Describe the solution you'd like

I would like to use VS Code's Remote Containers together with Fast Refresh.

With Create React App, there's an advanced configuration without ejecting (called CHOKIDAR_USEPOLLING), which makes their Fast Refresh work with Remote Containers.

[bennettdams]

A lot has changed between me noticing this issue and the current version of Next.js (v12.1.6).

I just tried it out again and it finally seems to work! 🥳

I'm going to change my Next.js projects to use devcontainers and will create new issues if something does not work, but at least for Fast Refresh, this topic is solved.

---

If you're following the steps above, the most basic setup should look like the following. It is based on the default "Node.js v16" devcontainer preconfiguration.
You don't even need to forwardPorts anymore!

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/javascript-node
{
	"name": "My project",
	"build": {
		"dockerfile": "Dockerfile",
		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
		// Append -bullseye or -buster to pin to an OS version.
		// Use -bullseye variants on local arm64/Apple Silicon.
		"args": { "VARIANT": "16" }
	},
	"settings": {},
	"extensions": [
		"dbaeumer.vscode-eslint"
	],
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],
	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",
	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "node"
}

[pmunin]

just created nextjs app with latest version

    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"

in simple devcontainer (image: mcr.microsoft.com/devcontainers/base:bookworm), start npm run dev and HMR does not work :-(
If I do the same on my windows host (outside of devcontainer) - HMR works fine

Should this issue be reopened?