After upgrade to 11.1.0 in live logs: [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

[PepijnSenders]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

Since upgrading to 11.1.0 we're seeing numerous errors that contain this message in our logs:

[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

The stacktrace is quite clear:

  "at Server.renderError (/app/node_modules/next/dist/server/next-server.js:1363:17)",
  "at Server.render404 (/app/node_modules/next/dist/server/next-server.js:1472:21)",
  "at Server.renderToResponseWithComponents (/app/node_modules/next/dist/server/next-server.js:1257:28)",

I tried to go through the history but could not find any changes besides this PR: #27303

Expected Behavior

We reverted back to 10.0.x because the 404 page was breaking too often. Would be nice if the next.js team could help with debugging this.

To Reproduce

Haven't been able to isolate the case where this breaks sadly.

[udf2457]

I can confirm I am seeing the same thing.

The docs suggest this syntax is acceptable:

export default function handler(req, res) {
  res.status(200).json({ name: 'Next.js' })
}

However, given:

export default async function handler(req, res) {
        if (req.method !== 'POST') {
            res.status(403).json({error: "Bad request"})
    } 
}

I get:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
code: 'ERR_HTTP_HEADERS_SENT'
}
events.js:377
throw er; // Unhandled 'error' event
^
Error [ERR_STREAM_WRITE_AFTER_END]: write after end
Emitted 'error' event on ServerResponse instance at:
at writeAfterEndNT (_http_outgoing.js:753:7)
at processTicksAndRejections (internal/process/task_queues.js:83:21) {
code: 'ERR_STREAM_WRITE_AFTER_END'
}

[PepijnSenders]

@udf2457 I don't think that these are related.

[balazsorban44]

@udf2457 your issue is probably that you never handle the else case. you will have to end the response if you don't enter the condition as well, I think. (small suggestion, the correct http code for bad request is 400 https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400)

[PepijnSenders]

We found out that we had the following code in our getServerSideProps() function:

        ctx.res.statusCode = 404;
        ctx.res.end();

        return {
          notFound: true,
        };

and because of this PR by @timneutkens, this started failing as 404's are now private and that header was being added after we called .end(), which wasn't necessary anyway!

[aslanon]

I am getting similar error. any solution suggestions?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.