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

JavaScript Express Basics Middleware Middleware Sequence and Routing

Amani Wainaina
Amani Wainaina
6,722 Points

ERR_TOO_MANY_REDIRECTS

Hi, I am getting an error when I try visiting http://localhost:3000. I am getting this error...

This page isn’t working localhost redirected you too many times. Try clearing your cookies. ERR_TOO_MANY_REDIRECTS crbug/1173575, non-JS module files deprecated.

How can I fix this? Any help would be appreciated.

14 Answers

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi Amani Wainaina,

You're getting very close to get this working! πŸ”₯ There's 2 issues stopping your app from running. On line 3 of your /routes/cards.js file you're trying to import the json file from the root of your project while this file is currently located in the routes directory instead. To fix this module not found error you'll want to change the import on line 3 from this:

const { data } = require('../data/flashcardData.json')

to this:

const { data } = require('./data/flashcardData.json')

After that change there's one more error being thrown when visiting localhost:3000 which is caused by line 9 of your /routes/index.js file where you're looking for the view /home while that pug file is called home. If you remove that / the view will be rendered to the screen and your app will start working as expected πŸ˜„

Hope this helps πŸ™‚

Amani Wainaina
Amani Wainaina
6,722 Points

This is the code I have in my app.js file.

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const { name } = require('pug/lib');

const app = express();
app.use(bodyParser.urlencoded({ extended: false}));
app.use(cookieParser());
app.use('/static', express.static('public'));

app.set('view engine', 'pug');

const mainRoutes = require('./routes');
const cardRoutes = require('./routes.cards');

app.use(mainRoutes);
app.use('/cards', cardRoutes);

app.use(( req, res, next) => {
    console.log('Hello');
    const err = new Error('Oh noes!');
    err.status = 500;
    next();
});

app.use((req, res, next) => {
    console.log('world');
    next();
});

app.use((req, res, next) => {
    const err = new Error('Not Found');
    err.status = 404;
    next(err);
})

app.use((err, req, res, next) => {
    res.locals.error = err;
    res.status(err.status);
    res.render('error');
})

app.listen(3000, () => {
    console.log('The application is running on localhost: 3000');
});
Julie Branyan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Julie Branyan
Full Stack JavaScript Techdegree Graduate 16,337 Points

Hi Amani,

I reviewed the code and identified two items. First on the variable cardRoutes, in the route there is a period instead of a / in the route, const cardRoutes = require('./routes/cards'). Second, where the error is being thrown, the next() function, should pass err into the function, next(err). I updated your code with these items and it worked when I tested it. If you are using nodemon in the terminal, when you save it should throw errors in the console to help determine where the error is located. This is what I used to narrow it down. Hope this fixes it!

const express = require('express'); 
const bodyParser = require('body-parser'); 
const cookieParser = require('cookie-parser'); 

const { name } = require('pug/lib');

const app = express(); 
app.use(bodyParser.urlencoded({ extended: false})); 
app.use(cookieParser()); 
app.use('/static', express.static('public'));

app.set('view engine', 'pug');

const mainRoutes = require('./routes'); 
const cardRoutes = require('./routes/cards');

app.use(mainRoutes); app.use('/cards', cardRoutes);

app.use(( req, res, next) => { console.log('Hello'); 
const err = new Error('Oh noes!'); 
err.status = 500; 
next(err); });

app.use((req, res, next) => { console.log('world'); next(); });

app.use((req, res, next) => { const err = new Error('Not Found'); err.status = 404; next(err); })

app.use((err, req, res, next) => { res.locals.error = err; res.status(err.status); res.render('error'); })

app.listen(3000, () => { console.log('The application is running on localhost: 3000'); });
Amani Wainaina
Amani Wainaina
6,722 Points

Hi Julie,

Thank you for pointing out those errors. I was able to make the changes, but now I am getting a...

RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: undefined

I am not sure why I am getting this error.

Julie Branyan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Julie Branyan
Full Stack JavaScript Techdegree Graduate 16,337 Points

If I remember the videos correctly, I think you were supposed to comment out the 500 error before moving onto the 404. My guess is one of these is causing the issue, but I wasn't able to recreate it. This treehouse thread there was another user with the RangeError and that's what they did. https://teamtreehouse.com/community/express-handling-404-errors-404-middleware-not-working. Thomas's comment is the one I'm referring to. Let me know if this fixes it.

Amani Wainaina
Amani Wainaina
6,722 Points

I commented out the 500 error and I tried what was in Thomas's comment but I am still getting the ....

RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: undefined at new NodeError (node:internal/errors:371:5) at ServerResponse.writeHead (node:http_server:274:11) at ServerResponse._implicitHeader (node:_http_server:265:8) at write (node:http_outgoing:766:9) at ServerResponse.end (node:_http_outgoing:855:5) at ServerResponse.send (C:\Users\Amani\flashcards\node_modules\express\lib\response.js:221:10) at done (C:\Users\Amani\flashcards\node_modules\express\lib\response.js:1013:10) at Object.exports.renderFile (C:\Users\Amani\flashcards\node_modules\pug\lib\index.js:448:12) at View.exports._express [as engine] (C:\Users\Amani\flashcards\node_modules\pug\lib\index.js:493:11) at View.render (C:\Users\Amani\flashcards\node_modules\express\lib\view.js:135:8)

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi Amani Wainaina πŸ‘‹

I'm unable to replicate the error you're getting on my end. The only thing I can think of is that the status code is not coming through correctly in your last middleware. I'd suggest to set the err.status to have a default value by changing your code from this:

app.use((err, req, res, next) => { 
  res.locals.error = err; 
  res.status(err.status); 
  res.render('error'); 
})

To this:

app.use((err, req, res, next) => { 
  res.locals.error = err; 
  const status = err.status || 500;
  res.status(status); 
  res.render('error'); 
})

This way your status will be set to the err.status if that is being passed through and otherwise fall back to the 500 status code.

Hope that will fix your issue, if not please share your code as it is now (after the changes suggested by Julie) and I'd be happy to have another look πŸ˜„

Amani Wainaina
Amani Wainaina
6,722 Points

Hi,

I made the changes to the err.status and I am still getting an error. This is the error I am getting now.....

node:internal/modules/cjs/loader:936 throw err; ^

Error: Cannot find module '../data/flashcardData.json' Require stack:

  • C:\Users\Amani\flashcards\routes\cards.js
  • C:\Users\Amani\flashcards\app.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (C:\Users\Amani\flashcards\routes\cards.js:3:18) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\Amani\flashcards\routes\cards.js', 'C:\Users\Amani\flashcards\app.js' ] }
Amani Wainaina
Amani Wainaina
6,722 Points

This is my app.js code....

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const { name } = require('pug/lib');

const app = express();

app.use(bodyParser.urlencoded({ extended: false}));
app.use(cookieParser());
app.use('/static', express.static('public'));

app.set('view engine', 'pug');

const mainRoutes = require('./routes');
const cardRoutes = require('./routes/cards');

app.use(mainRoutes);
app.use('/cards', cardRoutes);

app.use((req, res, next) => {
    const err = new Error('Not Found');
    err.status = 404;
    next(err);
 });

 app.use((err, req, res, next) => { 
    res.locals.error = err; 
    const status = err.status || 500;
    res.status(status); 
    res.render('error'); 
})

app.listen(3000, () => {
    console.log('The application is running on localhost: 3000');
});
Amani Wainaina
Amani Wainaina
6,722 Points

Here is also a link to the whole project file on GitHub...

https://github.com/amaniwanjiru/flashcards

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi Amani Wainaina πŸ‘‹

The code you've shared from the app.js looks good to me at first sight. Looks like the error is coming from your /routes/cards.js file where you're importing the json data. You'll want to make sure that the filepath is correct and the file itself is located in the data folder in the root of your project.

I wanted to have a look at your entire project but the visibility of the Github repo you've shared seems to be set to private as I'm getting a 404 error. Please change the visibility to public and I'd be happy to have another look πŸ™‚

Amani Wainaina
Amani Wainaina
6,722 Points

Thank you so much! It is now working.