Next.js: Adding eslint-loader stops hot-reloading

[obetoferreira]

Bug report

Creating a custom _error.js in pages directory makes HMR stop working.
This behavior occurs even when using Next's official example, unless your _error.js file contains a single div, with no other imports.

To Reproduce

1. Create any page (can be a simple index.js with "Hello, World!")
2. Create a _error.js page, with the example provided in this repo
3. Change index.js content
4. Save file
5. Wait for changes in the browser

Expected behavior

The window in the browser should update automatically.

System information

• OS: macOS Sierra 10.12.6
• Browser Chrome Version 69.0.3497.100 (Official Build) (64-bit)
• Version of Next.js: 7.0.1

Additional context

When file saved:

• The app logs "success server compiled" in the terminal
• The app logs "[HMR] bundle rebuilding" in the browser's console
  But there is no changes.

• The problem still occurs in 7.0.2-canary.5 version.

[obetoferreira]

Jesus I was so wrong.

Actually, eslint-loader dependency is what makes HMR stop working.

For some reason, eslint warnings are webpack warnings (see https://github.com/webpack-contrib/eslint-loader/issues/193). Although eslint-loader has the emitWarning: true param, it doesn't work as expected.

Just removed eslint-loader until this is resolved.

I'm not sure if this wrong behaviour has to do with next.js or webpack or eslint or eslint-loader community.

[herrstucki]

For the record, this also happens when any other webpack warning occurs (e.g. from mini-css-extract-plugin).

[dima-f1]

Any update or workaround on this issue?

[obetoferreira]

For now, i'm running ESLint before application start only. Also, i'm using some linter plugins to my code editor. Haven't checked if there is any updates to fix this.

[timneutkens]

Solved in #6099