Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
William Howell
Courses Plus Student 6,013 Points"RangeError: Invalid status code: undefined" when linking to another page
All is working up to creating and reading a query string. However I receive the
"RangeError: Invalid status code: undefined"
when I attempt to link to the opposite side of the card. I have compared my answer to the moderators with no luck.
cards.js
const express = require('express');
const router = express.Router();
const { data } = require('../data/flashcardData.json');
const { cards } = data;
router.get('/:id', (req, res) => {
const { side } = req.query;
const { id } = req.params;
const text = cards[id][side];
const { hint } = cards[id];
const templateData = { id, text };
if (side === 'question') {
templateData.hint = hint;
templateData.selector = "answer";
templateData.selectorDisplay = "Answer";
} else if (side === 'answer') {
templateData.selector = "question";
templateData.selectorDisplay = "Question";
}
res.render('card', templateData);
})
module.exports = router;
card.pug
extends layout.pug
block content
section#content
h2= text
if hint
p
i Hint: #{hint}
a(href=`${id}?side=${selector}`)= selectorDisplay
3 Answers
Neil McPartlin
14,662 PointsHi William,
I switched my 2 files for your 2 files, I made sure my browser was requesting a valid URL e.g http://localhost:3000/cards/2?side=question and immediately got an error 'similar' to yours. RangeError: Invalid status code: 0 so '0' and not 'Undefined'. If you look closely at your pug file, last line, it is one character space to the left of where it should be i.e. it should line up directly below 'h2' and 'if' above.
Once that was fixed, your files seem to work fine. As long as I make sure the card range shown in the browser URL remains between 0 and 4, I can click on question to get question and on answer to get answer.
I understand from your error report that one side actually works, but clicking to get the other side triggers the problem. Is the URL that gets displayed, formatted correctly or do you see a problem with that too?
Jessica Beech
11,405 PointsHey William! Man – I just spent a long time battling a very similar bug which I've now fixed. I hope I can help you.
Errors while rendering pug doesn't create a status code that the browser can understand. It's status code is 'undefined'. In app.js in this project, the error handling function assumes a defined status code when it renders the error to the browser. Because there isn't one, the error handling function throws its own error and you get this super-unhelpful 'RangeError' and nothing at all rendering in the browser!
To get an error that describes the REAL problem, replace the error handler in app.js with this slightly adjusted code (it gives any weird input a general 500 error):
app.use(( err, req, res, next ) => {
res.locals.error = err;
if (err.status >= 100 && err.status < 600)
res.status(err.status);
else
res.status(500);
res.render('error');
});
Having done this, I got a gloriously informative error page that told me I had a syntax error on line 15 of card.pug, where I'd made an indentation mistake (if you used the html to jade converter like I did, it may use a different indentation pattern e.g. spaces not tabs). On fixing my pug syntax, everything fell into place!
This approach should remove the range error and help you identify what the issue is.
Blake Burroughs
Full Stack JavaScript Techdegree Student 13,261 PointsThat answer just helped me a ton! Recommend adding that code to teacher's notes! I had a hanging space I couldn't even see causing the error and couldn't see a helpful error until I added this code. Great job!
Kevin Madden
Full Stack JavaScript Techdegree Graduate 15,396 PointsMy thanks to you!
Natalia Emelianova
407 PointsThank you so much, Jessica. You pointed to the indentation issue and it helped. The app works now!
Sheldon Small
4,504 PointsTaking a quick look this is my guess Hope it helps. coming from the placeholder in the get request parameter '/:id' should be const { id } = req.params.id instead of const { id } = req.params
William Howell
Courses Plus Student 6,013 PointsI appreciate it, but that didn't work. I believe with the ECMAscript 6 that the following are equal:
const { id } = req.params; const id = req.params.id;
I appreciate the try though.
William Howell
Courses Plus Student 6,013 PointsWilliam Howell
Courses Plus Student 6,013 PointsThanks.
Adjusting the indent worked to solve the issue. I have a feeling that it worked for one side and not the other is, that the portion that was defining the new URL was not being called correctly so it was populating an unknown value into the URL.