ERR_HTTP_HEADERS_SENT error (server-middleware with express-session)

Discussed in https://github.com/nuxt/framework/discussions/2665

Reproduction

https://codesandbox.io/s/nutx3-express-session-g92umr

<div type='discussions-op-text'>

^{Originally posted by mt-u January 11, 2022} HI. I’m trying to use express-session for session management. So, I created the following server middleware.

// ./server/middleware/session.ts
import session from 'express-session';

const s = session({
  cookie: {
    maxAge: 8 * 60 * 60 * 1000,
    sameSite: 'strict',
  },
  resave: true,
  rolling: true,
  saveUninitialized: false,
  secret: 'my secret',
});

export default (req, res, next) => {
  s(req, res, next)
};

Next, I created an API like below.

// ./server/api/count-up.ts
export default async (req, res) => {
  if (!req.session.count) {
    req.session.count = 0;
  }
  req.session.count++;
  return res.end(`The count is now ${ req.session.count }.`);
};

Then I called the above API from the app.vue as follows and confirmed that the session data could be read and written correctly in the API.

<!-- ./app.vue -->
<template>
  <div>
    <button type="button" @click="func">Call count-up API.</button>
  </div>
</template>

<script setup lang="ts">
async function func() {
  const r = await $fetch('api/count-up');
  console.log(r);
}
</script>

However, it seems that I’m getting a server error about writing the header, I’m getting the following message on the console:

Nuxt CLI v3.0.0-27356801.e9128f3

  > Local:    http://localhost:3000/
  > Network:  http://xxx.xxx.xxx.xxx:3000/

ℹ Vite warmed up in 452ms
✔ Vite server built in 1157ms
✔ Nitro built in 510 ms
Cannot set headers after they are sent to the client
  at new NodeError (internal/errors.js:322:7)
  at ServerResponse.setHeader (_http_outgoing.js:561:11)
  at renderMiddleware (file://./.nuxt/nitro/index.mjs:245:9)
  at async handle (file://./node_modules/h3/dist/index.mjs:601:19)
(node:503) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (internal/errors.js:322:7)
    at ServerResponse.setHeader (_http_outgoing.js:561:11)
    at Object.handleError [as onError] (file:///app/.nuxt/nitro/index.mjs:89:7)
    at file:///app/node_modules/h3/dist/index.mjs:560:24
(Use `node --trace-warnings ...` to show where the warning was created)
(node:503) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:503) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Does anyone know how to fix this error?</div>

[danielroe]

You might want to look into https://github.com/sidebase/nuxt-session.

[Majdanero]

@danielroe I added Reproduction.