Getting error: Error: Can't set headers after they are sent - node.js

Question

I am following a course from Wesbos on Node.js, and I created a /add GET route that uses the addStore controller:
index.js:
const express = require('express')
const router = express.Router()
const storeController = require('../controllers/storeController')
const { catchErrors } = require('../handlers/errorHandlers')
router.get('/', catchErrors(storeController.getStores))
router.get('/stores', catchErrors(storeController.getStores))
router.get('/add', catchErrors(storeController.addStore))
router.post('/add', catchErrors(storeController.createStore))
router.post('/add/:id', catchErrors(storeController.updateStore))
router.get('/stores/:id/edit', catchErrors(storeController.editStore))
module.exports = router
storeController.js:
exports.addStore = (req, res) => {
res.render('editStore', { title: 'add store'})
}
But when i go to the add route i get the error:
Error: Can't set headers after they are sent.
Any ideas what is wrong?
Here is the editStore and storeform view:
editStore:
extends layout
include mixins/_storeForm
block content
.inner
h2= title
+storeForm(store)
storeForm:
mixin storeForm(store = {})
form(action=`/add/${store._id || ''}` method="POST" class="card")
label(for="name") Name
input(type="text" name="name" value=store.name)
label(for="description") Description
textarea(name="description")= store.description
- const choices = ['wifi','Open-late','Family Friendly', 'vegetarian','licensced']
- const tags = store.tags || []
ul.tags
each choice in choices
.tag.tag__choice
input(type="checkbox" id=choice value=choice name="tags" checked=(tags.includes(choice)))
label(for=choice) #{choice}
input(type="submit" value="Save" class="button")
catchErrors:
/*
Catch Errors Handler
With async/await, you need some way to catch errors
Instead of using try{} catch(e) {} in each controller, we wrap the function in
catchErrors(), catch any errors they throw, and pass it along to our express middleware with next()
*/
exports.catchErrors = (fn) => {
return function(req, res, next) {
return fn(req, res, next).catch(next);
};
};
/*
Not Found Error Handler
If we hit a route that is not found, we mark it as 404 and pass it along to the next error handler to display
*/
exports.notFound = (req, res, next) => {
const err = new Error('Not Found');
err.status = 404;
next(err);
};
/*
MongoDB Validation Error Handler
Detect if there are mongodb validation errors that we can nicely show via flash messages
*/
exports.flashValidationErrors = (err, req, res, next) => {
if (!err.errors) return next(err);
// validation errors look like
const errorKeys = Object.keys(err.errors);
errorKeys.forEach(key => req.flash('error', err.errors[key].message));
res.redirect('back');
};
/*
Development Error Handler
In development we show good error messages so if we hit a syntax error or any other previously un-handled error, we can show good info on what happened
*/
exports.developmentErrors = (err, req, res, next) => {
err.stack = err.stack || '';
const errorDetails = {
message: err.message,
status: err.status,
stackHighlighted: err.stack.replace(/[a-z_-\d]+.js:\d+:\d+/gi, '<mark>$&</mark>')
};
res.status(err.status || 500);
res.format({
// Based on the `Accept` http header
'text/html': () => {
res.render('error', errorDetails);
}, // Form Submit, Reload the page
'application/json': () => res.json(errorDetails) // Ajax call, send JSON back
});
};
/*
Production Error Handler
No stacktraces are leaked to user
*/
exports.productionErrors = (err, req, res, next) => {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
};
Link to my repo: https://github.com/GiorgioMartini/learnnode/tree/master/maketogether