Search code examples
javascriptreactjswebpacknext.jsvscode-remote

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:

image

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?

Solution

  • 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"
}