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

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 https://github.com/vercel/next.js/issues/2179#issuecomment-316568536):

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.

---

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

---

Earlier I created a feature request, but maybe someone already managed to make this work without huge changes in the configuration/setup?

Answer

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 maybe other stuff 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"
}