Sending emails using next.js API after creating a user ERR_HTTP_HEADERS

I'm currently creating users using the next.js API, however, I now want to send emails using sendgrid.

I have this setup, however, I get the following

event - compiled successfully in 661 ms (254 modules)
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 DevServer.renderError (/Users/ellisbrookes/Documents/Ellis-Developement/node_modules/next/dist/server/next-server.js:1628:17)
    at DevServer.run (/Users/ellisbrookes/Documents/Ellis-Developement/node_modules/next/dist/server/dev/next-dev-server.js:431:35)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async DevServer.handleRequest (/Users/ellisbrookes/Documents/Ellis-Developement/node_modules/next/dist/server/next-server.js:305:20) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
error - uncaughtException: Error [ERR_STREAM_WRITE_AFTER_END]: write after end

The user is being created and the email is being sent, however, I'm not sure why I'm getting this error.

Here is what I have form wise in terms of the onSubmit api call

const res = await fetch('/api/auth/register', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
})

and here is what I have in the api/auth/register file

import connectDB from '../../../lib/mongodb'
import bcrypt from 'bcrypt'
import User from '../../../models/user'

const mail = require('@sendgrid/mail');

mail.setApiKey(process.env.SENDGRID_API_KEY);

const handler = async (req, res) => {
  // check if user exists in the database already
  const emailExists = await User.findOne({ email: req.body.email })
  if (emailExists) return res.status(400).send("Email already exists")

  // hash password
  const salt = await bcrypt.genSalt(10)
  const hash = await bcrypt.hash(req.body.password, salt)

  var user = new User({
    firstname: req.body.firstname,
    lastname: req.body.lastname,
    username: req.body.username,
    email: req.body.email,
    password: hash
  })

  try {
    user = await user.save();
    res.send({ user: user._id })
  } catch {
    res.status(400).send(err)
  }

  // nodemailer
  const message = `
    First Name: ${req.body.firstname}\r\n
    Last Name: ${req.body.lastname}\r\n
    Username: ${req.body.username}\r\n
    Email: ${req.body.email}
  `;

  const data = {
    to: `${req.body.email}`,
    from: 'Ellis Development <[email protected]>',
    subject: `Welcome ${req.body.firstname} ${req.body.lastname} to Ellis Development`,
    text: message,
    html: message.replace(/\r\n/g, '<br />')
  };

  await mail.send(data);

  res.status(200).json({ status: 'OK' });
}

export default connectDB(handler)

As mentioned before the user is being created and the email is being sent, but not sure why I'm getting the ERR_HEADERS error.

CodePudding user response：

In the try-catch block, you send a response res.send({ user: user._id }) without stopping the function. The function continues to execute and you try to send another response res.status(200).json({ status: 'OK' });

I'd recommend changing the try-catch block to this:

try {
  user = await user.save();
} catch {
  return res.status(400).send(err)
}

This will stop the execution if there is an error (the return statement), but will continue if user.save() successfully finished. Finally, it will return the 200 {status: OK} response at the end.