Context cancelled when Webpack HMR sends updates

1. Caddy version (caddy version):

v2.1.1h1:X9k1+ehZPYYrSqBvf/ocUgdLSRIuiNiMo7CvyGUQKeA=

2. How I run Caddy:

a. System environment:

Manjaro Linux x64

b. Command:

sudo caddy run

d. My complete Caddyfile or JSON config:

{
  auto_https off
}

(theheaders) {
  header Host {host}
  header X-Forwarded-For {remote_host}
  header X-Forwarded-Proto {scheme}
  header X-Url-Scheme {scheme}
  header X-Forwarded-Host {host}
}

:80 {
  import theheaders
  encode gzip

  route /api* {
  reverse_proxy :8000
  }
  route /media* {
  reverse_proxy :8000
  }
  route /admin* {
  reverse_proxy :8000
  }
  route /static* {
  reverse_proxy :8000
  }
  reverse_proxy :3000
}

3. The problem I’m having:

Every time Next.js dev server sends a request to Webpack HMR the request doesn’t get sent and the page doesn’t update. Without proxying, e.g. without Caddy at all, the request gets sent and it works fine.

4. Error messages and/or full log output:

Every time a request is being sent to Webpack HMR, I get this in logs:

2020/08/10 15:03:02.545 INFO    using adjacent Caddyfile
2020/08/10 15:03:02.547 INFO    admin   admin endpoint started  {"address": "tcp/localhost:2019", "enforce_origin": false, "origins": ["[::1]:2019", "127.0.0.1:2019", "localhost:2019"]}
2020/08/10 18:03:02 [INFO][cache:0xc00069e300] Started certificate maintenance routine
2020/08/10 15:03:02.548 INFO    tls     cleaned up storage units
2020/08/10 15:03:02.549 INFO    autosaved config        {"file": "/root/.config/caddy/autosave.json"}
2020/08/10 15:03:02.549 INFO    serving initial configuration
2020/08/10 15:04:08.939 ERROR   http.handlers.reverse_proxy     aborting with incomplete response       {"error": "context canceled"}
2020/08/10 15:04:23.356 ERROR   http.handlers.reverse_proxy     aborting with incomplete response       {"error": "context canceled"}

The request looks like this:

scheme http
host localhost
filename /_next/webpack-hmr

When I try to request it directly from the browser I get infinite loading and then Unable to connect. I suspect I messed up somewhere in the config.

5. What I already tried:

I couldn’t find anything relevant on google :frowning: everything with Context cancelled was unrelated. But I found some issues about Webpack dev server, but with nginx, and there they returned 404. In my case nothing is returned at all. Although, it works just fine without a proxy, e.g. localhost:3000/webpack-hmr/...

6. Links to relevant resources:

Webpack dev server issue (with nginx)

This error is somewhat unusual and I haven’t seen it actually appear before. In fact, it occurs in a place where we borrowed code from the Go standard library (which is probably correct), and they panic in case of this same error but I changed it to log the error instead:

While it’s certainly possible for it to be a bug in Caddy – like something I got wrong as I ported the code over from the standard lib – and it’s certainly possible for it to be a bug in the standard lib’s code in the first place – though that’s even less likely – I believe this is a problem with either the client (web page) or the backend app. Since the error is context cancelled I’m guessing that means one side of the proxy “hung up” i.e. cancelled the request or response.

It’s especially weird, because I catch all requests on :3000, and if I access it directly (e.g. :3000/webpack-hmr) it gives me the file

so yep something wrong with Caddy

Can you tell us how to reproduce the problem? (Step-by-step instructions, as simple as possible, assume no knowledge of your stack.)

No problem, here are the repro instructions:

  1. Install Node.js
  2. Create a folder
  3. Put caddyfile with the contents there, then run sudo caddy run
  4. Run npx create-next-app www
  5. Create another folder with any app that will host on :8000
  6. Run caddy
  7. Go to www folder and run npm run dev
  8. Open a browser with “Requests” tab open
  9. Open pages/index.js file of www in the editor and try to edit the source code, but without breaking the project. E.g. try to remove or add an html tag, or write some text there.
  10. Go back to the browser and see some requests by Webpack HMR being made - should be 0B and not transfered.
  11. Open your caddy running, you’ll see these context cancelled errors

the instructions are that long so you can reproduce exactly my case, there’s nothing difficult there

any updates on this? it’s quite annoying that I can’t use HMR / React Refresh and have to force reload every time

Thanks for the instructions. It’s a big ask. I haven’t had a chance yet to follow all those instructions including installing node. I’m actually quite behind on issues and the 2.2 release as-is. Of course, anyone else is welcome to help solve it, I’m just stacked full right now.

This topic was automatically closed after 30 days. New replies are no longer allowed.

This had been closed due to age, but a followup thread was opened that offers an explanation (for those who were involved in this thread or find this via searching):