Next.js: Error: Can't set headers after they are sent. in version 5 and higher for next/express app

[tima101]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.
  I've read:
• zeit/next.js#2152
• zeit/next.js#3778
• https://github.com/zeit/next.js/commit/7b2cd84fee924cb5299635000d8067e3c16c7ccc#diff-bec864430eb5752a683c8798d0c6bd6c
• zeit/next.js@c210a2e

Expected Behavior

No error on terminal.

Current Behavior

Getting error on terminal for next 5.0.0, 5.0.1-canary.8 _but not_ 4.3.0-canary.1:

{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:390:13)
    at SendStream.send (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:618:10)
    at onstat (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:153:5) expose: false, statusCode: 500, status: 500 }

I've read this issue https://github.com/zeit/next.js/issues/2152
However I don't redirect inside getInitialProps.

My app has express/next server. Link

Steps to Reproduce (for bugs)

1. Start app with different versions of next 5.0.0, 5.0.1-canary.8, 4.3.0-canary.1
2. When app uses 5.0.0, 5.0.1-canary.8 versions of next (but not 4.3.0-canary.1) then you see above error object in terminal

[jschumme]

do you use the compression module in your express server?

[timneutkens]

I'm guessing it's related to express-session.

[timneutkens]

The funniest thing is that https://github.com/zeit/next.js/commit/7b2cd84fee924cb5299635000d8067e3c16c7ccc#diff-bec864430eb5752a683c8798d0c6bd6c solves it the other way around, eg when you res.writeHead(); res.end() in getInitialProps. It's very weird though since that means express-session is adding the headers after they are sent.

[tima101]

@jschumme I don't use compression. Is this example relevant server-sent events?

@timneutkens Thanks. Yes, I think it is express session, if I don't use session, I don't see this error.

I checked 5.0.1-canary.9 and see same error.

[reel]

Something weird. When checking if headers are sent, it returns false:

  router.get('*', (req, res) => {
    if (!res.headersSent) {
      console.log('headersSent', res.headersSent);
      return handle(req, res);
    }
  });

And somehow gives me this:

headersSent false
{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (C:\Users\...\code\henri\packages\view\node_modules\send\index.js:390:13)
    at SendStream.send (C:\Users\...\code\henri\packages\view\node_modules\send\index.js:618:10)
    at onstat (C:\Users\...\code\henri\packages\view\node_modules\send\index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:153:5) expose: false, statusCode: 500, status: 500 }

It happens when requesting a new:

http://localhost:3000/_next/webpack-hmr

But the res.req.originalUrl that sets off this error is:
"/_next/-/page/_error.js.map"

The page loads fine.

It does not happen when using <Link>

[reel]

When debugging, with a breakpoint at: https://github.com/zeit/next.js/blob/canary/server/index.js#L102

I get:

res.finished = false
res.headersSent = true

[disintegrator]

I just saw this issue on my side and determined it was being caused by the compression plugin. I think it's interfering with the hot module reloading. I worked around it like so:

const app = express();
if (process.env.NODE_ENV === "production") {
  app.use(compression());
}

[laibao101]

I have the same problem, and if i do not use the session, there is no error in terminal, does anyone fixed the problem ?

[reel]

I tried the compression in production only and it does not clear the messages.

[israelidanny]

Same problem, not using compression plugin at all. Looks like it has something to do with session? I'm also using session.

[supadits]

Same problem here after update to next 5 and it cause by compression.

[julioprotzek]

Adding compression as the very last line, just before server.listen() get's rid of the message for me. Next 5.1.0, compression 1.7.2 and express 4.15.2. Hope it helps.

[tmarshall]

I've noticed this in multiple projects, as well.

FWIW this is only happening to me when I have Chrome Inspector open. If it's closed, no problem. If it's open, I get this error on every page load.

[tmarshall]

^ moving compression fixed it for me as well 🤷‍♂️

[icflorescu]

^ you do realise that you effectively disable compression by moving it to the very last line, just before server.listen()?

[tmarshall]

Yeah, I do. I should not have said 'fixed' - rather 'covered up by disabling compression'

[tmarshall]

An update on this:

For the meantime i'm disabling compression on dev like mentioned above

I've added some logs in various dist files, and found that it's happening on both /_next/-/page/_app.js.map and /_next/-/page/_error.js.map

::1 - - [30/Apr/2018:23:12:52 +0000] "GET /_next/on-demand-entries-ping?page=/listings HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /list/list-placement HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/webpack-hmr HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/-/page/listings.js HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/static/commons/main.js HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/static/commons/manifest.js HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/-/page/_app.js HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:53 +0000] "GET /_next/-/page/_error.js HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /static/images/proj-logo.svg HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /_next/-/page/listings.js.map HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /_next/static/commons/manifest.js.map HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /_next/static/commons/main.js.map HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /static/images/icon-down-arrow.svg HTTP/1.1" 200 847 "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
::1 - - [30/Apr/2018:23:12:54 +0000] "GET /static/images/graphic-search.svg HTTP/1.1" 200 - "http://localhost:3200/list/list-placement" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
GET /_next/-/page/_app.js.map
{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (/Users/mars/proj/node_modules/next/node_modules/send/index.js:390:13)
    at SendStream.send (/Users/mars/proj/node_modules/next/node_modules/send/index.js:619:10)
    at onstat (/Users/mars/proj/node_modules/next/node_modules/send/index.js:731:10)
    at FSReqWrap.oncomplete (fs.js:171:5) expose: false, statusCode: 500, status: 500 }
::1 - - [30/Apr/2018:23:12:55 +0000] "GET /_next/-/page/_app.js.map HTTP/1.1" 500 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
GET /_next/-/page/_error.js.map
{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (/Users/mars/proj/node_modules/next/node_modules/send/index.js:390:13)
    at SendStream.send (/Users/mars/proj/node_modules/next/node_modules/send/index.js:619:10)
    at onstat (/Users/mars/proj/node_modules/next/node_modules/send/index.js:731:10)
    at FSReqWrap.oncomplete (fs.js:171:5) expose: false, statusCode: 500, status: 500 }
::1 - - [30/Apr/2018:23:12:55 +0000] "GET /_next/-/page/_error.js.map HTTP/1.1" 500 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"

This is happening on every page load.

[israelidanny]

Mine crashes without compression O_o

[oliviertassinari]

I can confirm that the error only happens when Chrome Dev tools is open. At the contraries of what most people report, we don't use compression, still, we can experience the error with [email protected].

[usagi-f]

FYI,
A similar problem was also confirmed in Next.js + __Koa.js__.
This Error message is displayed when koa-session or koa-session-minimal is enabled.

[email protected]
[email protected]
[email protected]
[email protected]

I want a solution too.

[theevilhead]

compression was the problem for me

[timneutkens]

I believe this was solved when we added checks for isResSent in Next.js 7 or so.

[mengqing]

@timneutkens can you explain a bit more in detail on your comment? I'm on 7.0.2 and I'm still getting this issue

[pathikdevani]

@timneutkensI am also facing the same issue. I'm using 7.0.2.

[gufranmirza]

check this if it works https://github.com/gufranmirza/nextjs-universal-redirect

[martpie]

For those still facing this error (even with Next.js 8), make sure that you don't res multiple requests, that was my problem:

if (req.url && ROOT_STATIC_FILES.includes(req.url)) {
  const path = join('static', 'root', req.url);
  app.serveStatic(req, res, path);

  return; // <- THIS is important
}

nextHandler(req, res);

[aequasi]

I'm unfortunately getting this using now dev without a custom backend.

[nickerlan]

Faced the same error with NextJS api routes
In my case it was a stupid mistake of treating res.json() like return

if (smth){ res.json({smth}} return ; //<==as martpie already said - yes, this is quite important. } res.json({other option}}