Regression from 7.2.1 to 7.3.0

[zwarag]

Hello webpack Team.
I believe there is a regression between 7.2.1 and 7.3.0.

Bug report

In our angular project we use webpack builder. This has a dependency to webpack-dev-middleware.
When setting up a project that uses 7.3.0, an error is thrown as seen below.

NOTE: The setup is just a default setup, but we still use webpack instead of esbuild.

Actual Behavior

An error is thrown after starting the project.
The interesting thing is that our projects do not have SSR enabled in any way. So what webpack does is to just behave as a file server.

There seems to be other users affected by this: https://stackoverflow.com/questions/78777506/angular-18-post-request-node-http-outgoing659-throw-new-err-http-headers-sen

Expected Behavior

No regression, 7.3.0 should work like 7.2.1.

How Do We Reproduce?

I'm sorry, I'm not able to provide an minimal reproducable example.

Please paste the results of npx webpack-cli info here, and mention other relevant information

webpack info:

❯ npx webpack-cli info
Need to install the following packages:
webpack-cli@5.1.4
Ok to proceed? (y)


  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.40 GB / 32.00 GB
  Binaries:
    Node: 22.5.1 - ~/.local/state/fnm_multishells/769_1723553164937/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/769_1723553164937/bin/yarn
    npm: 10.8.2 - ~/.local/state/fnm_multishells/769_1723553164937/bin/npm
  Browsers:
    Brave Browser: 127.1.68.137
    Chrome: 127.0.6533.119
    Edge: 127.0.2651.98
    Safari: 17.5

Error:

~/repos/thomas  master [!] +12                                                                                 󰚲 ^18.1.3  v22.5.1 3s  08:39:02
❯ yarn start
yarn run v1.22.22
$ ng serve
✅ Extracted following Data: {"className":"Thomas","type":"application","name":"thomas","version":"0.0.0","prefix":"app","buildTime":"14.8.2024, 08:39:04","releaseVersion":"","rdsNgVersion":"^18.0.0"}
✅ No standalone application detected!
✅ Template File read
⌛ Compiling Template
✏️ writing file
✅ MetaData Service created at:  /Users/harryskavan/repos/thomas//src/app/gen/meta-data/thomas-meta-data.service.ts
✔ Browser application bundle generation complete.

Initial chunk files   | Names                                                              |  Raw size
main.js               | main                                                               |   6.97 MB |
styles.css, styles.js | styles                                                             | 750.96 kB |
polyfills.js          | polyfills                                                          | 348.59 kB |
runtime.js            | runtime                                                            |  14.45 kB |

                      | Initial total                                                      |   8.08 MB

Lazy chunk files      | Names                                                              |  Raw size
581.js                | sweetalert2                                                        | 173.58 kB |
379.js                | rds-ng-template-smart-dom-mutation-observer-presenter-BMVse34q-mjs |  12.90 kB |

Build at: 2024-08-14T06:39:08.364Z - Hash: a594e7634292f9e5 - Time: 3472ms


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

Initial chunk files | Names   | Raw size
runtime.js          | runtime | 14.45 kB |

5 unchanged chunks

Build at: 2024-08-14T06:39:08.852Z - Hash: 0dbbbd76ef220eef - Time: 349ms

✔ Compiled successfully.
node:_http_outgoing:699
    throw new ERR_HTTP_HEADERS_SENT('set');
          ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (node:_http_outgoing:699:11)
    at setResponseHeader (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/utils/compatibleAPI.js:120:14)
    at processRequest (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/middleware.js:599:7)
    at ready (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/utils/ready.js:16:5)
    at middleware (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/middleware.js:640:5)
    at Layer.handle [as handle_request] (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:328:13)
    at /Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:280:10)
    at /Users/harryskavan/repos/thomas/node_modules/connect-history-api-fallback/lib/index.js:34:14
    at Layer.handle [as handle_request] (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:328:13)
    at /Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:280:10)
    at goNext (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/middleware.js:133:16)
    at processRequest (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/middleware.js:605:15)
    at ready (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/utils/ready.js:16:5)
    at middleware (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/dist/middleware.js:640:5)
    at Layer.handle [as handle_request] (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:328:13)
    at /Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:280:10)
    at Server.setHeaders (/Users/harryskavan/repos/thomas/node_modules/webpack-dev-server/lib/Server.js:2829:5)
    at Layer.handle [as handle_request] (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:328:13)
    at /Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:286:9
    at param (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:365:14)
    at param (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:376:14)
    at Function.process_params (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:421:3)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/index.js:280:10)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:141:14)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7)
    at next (/Users/harryskavan/repos/thomas/node_modules/express/lib/router/route.js:145:7) {
  code: 'ERR_HTTP_HEADERS_SENT'
}

Node.js v22.5.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[alexander-akait]

Sorry, I can't say there is a problem without reproduciable example and we always sent Content-Length header in such case - https://github.com/webpack/webpack-dev-middleware/blob/v7.2.1/src/middleware.js#L695 (based on your stacktrace), so I think the problem in another place and maybe not related to weback-dev-middleware

[alexander-akait]

Anyway if you can create a reproducible repo I will investigate

[vieira]

Hello, I am having the same issue in a React project, changing the version of webpack-dev-middleware from 7.3.0 to 7.2.1 in the lockfile "solves" the problem.

I also noticed that while it happens when NODE_ENV="production" it does not happen if NODE_ENV="development" in my case.

The devServer block in webpack.config.js:

  devServer: {
      open: true,
      allowedHosts: 'all',
      hot: true,
      compress: false,
      static: {
        directory: path.join(__dirname, 'src'),
      },
      devMiddleware: {
        stats: 'minimal',
      },
      client: {
        overlay: {
          errors: true,
          warnings: false,
        },
      },
      historyApiFallback: {
        rewrites: [{
          from: /^\/.*$/,
          to: '/',
        }],
      },
    }

[alexander-akait]

There are no problems with devServer, looks like something sent content early than we, without context it is hard to say who...

[alexander-akait]

/cc @alan-agius4 Maybe I can help with debug?

[alan-agius4]

@alexander-akait, without a reproduction of the issue, it's difficult to understand what's going on. Unless a reproduction is provided, I’d say this is not actionable.

[shanedg]

I was running into this problem with start-server-and-test. I found this note in the README about webpack-dev-server not handling HEAD requests: https://github.com/bahmutov/start-server-and-test/blob/8ebb70b7b2be40b4b1b2f08d0b9c3ef51dfaca10/README.md#note-for-webpack-dev-server-users

Changing to GET requests per the note worked for me. I'm not sure why HEAD requests worked for me before (?) but it only became an issue when I was updating dependencies and webpack-dev-middleware was indirectly bumped from 7.2.1 to 7.3.1.

[alexander-akait]

That's weird, because we are doing it https://github.com/webpack/webpack-dev-middleware/blob/master/src/middleware.js#L800, can you debug it locally and provide more infromation?

[shanedg]

I have a minimal repro of the issue here: https://github.com/shanedg/webpack-dev-middleware-1920

[alexander-akait]

I will look soon, thank you

[alexander-akait]

Found a problem, fix will soon