Next.js: How to Enable hmr on virtualbox

[thundermiracle]

Sorry for bothering you.
I'm new to nextjs as well as webpack and I've been stuck in vagrant hmr for almost 1 day.
I checked these issues #1899 #823 but still don't understand how to enable hmr on virtualbox. My host machine is windows too.

I added following part to next.config.js but hmr was not fired after I change files on windows.

module.exports = {
  webpack: (config) => {
    config.watchOptions = {
      poll: 500,
      aggregateTimeout: 300,
    };
    return config;
  },
};

[arunoda]

You need to use override thewebpackDevMiddleware. Check here: https://github.com/zeit/next.js#customizing-webpack-config

And use options as mentioned here: https://github.com/webpack/webpack-dev-middleware

Anyway, Next.js is working on native Windows just like in Mac/Linux. May be you don't need to use Vagrant.

[thundermiracle]

@arunoda
Thank you very very much! The problem solved.
And thanks for your suggestions too, we'll discuss it.

[thetoxicavenger]

@arunoda I am having the same issue. What webpack-dev-middleware option(s) should be changed in order to get this to work? I looked at the documentation link you sent and didn't see anything obvious.

[thundermiracle]

@thetoxicavenger Just change webpack to webpackDevMiddleware will make it work as I posted:

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;
  },
};

[timneutkens]

@thundermiracle thanks for sharing this for people that experience this issue 👌 I've turned your code into a code block so it can be easily copy-pasted 👍

[thetoxicavenger]

@arunoda ah, I didn't realizing you were referencing @thundermiracle's initial code. Unfortunately this still isn't working for me :( HMR works fine without docker, but not with it.

from package.json:

"scripts": { "dev": "NODE_ENV=dev next", "build": "next build", "start": "next start", "lint": "standard --parser babel-eslint --fix" },

from Dockerfile:
```FROM node:8.1.4

Create app directory

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

Install app dependencies

COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app

RUN npm run build

EXPOSE 3000

CMD [ "npm", "run", "dev" ]
```

Let me know if you need additional information. My next.js setup is based on https://github.com/luisrudge/next.js-auth0.

[thundermiracle]

Maybe ask help from webpack stackoverflow will solve your problem quicker? Since nextjs has already caught the configuration.

[damianesteban]

Has anyone else been unable to solve this problem? Unfortunately @thundermiracle 's example isn't working for me.

[thundermiracle]

@damianesteban I tried again just now and it worked both in CentOS and Ubuntu.
You can download my test project and try it in your environment.
https://github.com/thundermiracle/nextjs-hmr

[KristerV]

Not working for me either on docker. Console says next.config.js is loaded, yet no hmr. Also @thundermiracle your link href misdirects. In any case doesn't help.

My issue seems to be server side files and not stuff under /pages.

I've resorted to restarting the container..

[thundermiracle]

@KristerV I don't think there is any difference between docker and virtualbox in this case.
Anyway, I'll update the example with DockerFile. You'll be able to check it later.

[KristerV]

I ended up using nodemon. Which is not ideal, but works. As in this solution is slower than next.js'.

[sheldonj]

@KristerV would you be willing to share your DockerFile setup for getting this working with nodemon, I'm in the same boat. Trying to use docker compose to stitch together a couple of services where a next.js app is just one piece.

[KristerV]

well the command to start the thing is npm run dev and in package.json there's the average stuff:

"scripts": {
    "dev": "nodemon server/index.js",
[...]

Nothing special.