error using Next with compression package

[sourcesoft]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'm facing a really werid error in express that I have no idea what the reason is. I'm using compression package with a custom server

const express = require('express')
const next = require('next')
const compression = require('compression')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()
  server.use(compression())

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

This should work with no problem.

Current Behavior

It works with no errors until I open dev tools (only in chrome)

{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:390:13)
    at SendStream.send (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:618:10)
    at onstat (~/work/app/next.js/examples/custom-server-express/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:167:5) expose: false, statusCode: 500, status: 500 }

Steps to Reproduce (for bugs)

1. Clone the repo and use the custom-server-express folder
2. Add compression package and use it as a middleware
3. open chrome at localhost:3000
4. run the server (there's no error in the log, even refresh)
5. open Chrome dev (even with no extensions) and refresh
6. see the error (no error using Firefox).

Context

Your Environment

Tech	Version
next	4 or 5 both
node	9.2.0
OS	OSX 10.13.3
browser	Chrome 64.0.3282.140
etc

[ghengeveld]

I've faced the same issue. My solution was to remove compression from Express and rely on a reverse proxy (i.e. Nginx) to do compression. This is actually the best practice because gzipping is a CPU-intensive operation which Node isn't really suitable for. Nginx is much better at this. Alternatively you could use Cloudflare or a similar CDN and rely on their optimizations (e.g. caching your static resources so Node will only have to serve them once).

[eli0shin]

While @ghengeveld's point is valid. This bug is only present (for me at least) in dev mode. I was personally able to prevent this error by only running compression when process.env.NODE_ENV === 'production'

app.prepare().then(() => {
  const server = express();
  if (!dev) {
    server.use(compression());
  }
}

[icflorescu]

Facing the same weird issue (error appearing exclusively when using Chrome Dev Tools). @eli0shin's fix works for me too.

[timneutkens]

I think this was solves when we introduced isRestSent which checks if the response has been ended.