NodeJS error when rendering page:Cast to ObjectId failed for value "styles.css" at path "_id"

Question

The error prevents my webpage from being rendered. As mentioned in the title, the error lies in styles.css, when I take this file out, I do not get any errors.

styles.css is included in a separate headers.ejs file which is added in all pages, but there is only one route for which the error is shown(/cats/new). I put up some some logs around my routes and it seems when I enter /cats/new/, I am automatically redirected to a new route (get /cats/:id). I am wondering if this is the cause of the error?

I have attached my routes and the full error message below:

routes:

var express = require('express');
var router = express.Router();
var User = require('../models/user.js');
var Cat = require('../models/cat.js');
var Comment = require('../models/comment.js');

//middleware
function isAuthenticated(req,res,next) {

    req.isAuthenticated() ? next() : res.redirect('/login');
}



router.get("/", function(req,res) {

    res.redirect("cats");
}); 

router.get('/cats', function(req,res) {

    Cat.find({}, function(err, cats) {
        if (err) {
            console.log(err);

        } else {
          res.render('cats', {cats: cats});  
        }  
    });
});


router.get('/cats/new', isAuthenticated, function(req,res) {

    console.log('went to /cats/new');

    res.render('new', {user: req.user});
});

router.post('/cats', isAuthenticated, function(req,res) {

    console.log('went to post /cats');
    var name = req.body.name;
    var image = req.body.url;
    var owner = req.user.username
    var description = req.body.description;

    cat = new Cat({
        name: name,
        image: image,
        owner: owner,
        description: description     
    });

    cat.save();

    User.findById(req.user._id, function(err, user) {
        if (err) {
            console.log(err);

        } else {
            user.cats.push(cat);
            user.save(); 

        }
    })

     res.redirect('cats');

    });



router.get('/cats/:id', function(req,res) {

    var id = req.params.id;

    Cat.findById(id).populate('comments').exec(function(err, cat) {

          if (err) {
              console.log('entering get /cats/:id');
              console.log(err);

        } else {

            console.log('no errror yet');        
            console.log(cat.comments);          
            res.render('show', {cat:cat});          
        }
      });
});


router.post('/cats/:id', isAuthenticated, function(req,res) {

    console.log(isAuthenticated);

    var id = req.params.id; 
    Cat.findById(id, function(err, cat) {
        console.log('findById running');

        if (err) {
            console.log(err);
            console.log('err finding cat');
            res.redirect('/cats');

        } else {

            console.log('before Comment.create');
            Comment.create(req.body.comment, function(err, comment) {
                console.log('after Comment.create');
                if (err) {
                    console.log(err);  

                } else {


                    console.log('right after 2nd else');
                    comment.author.id = req.user._id;
                    console.log(req.user._id);
                    console.log(req.user.username);
                    comment.author.username = req.user.username; 
                    comment.cat = id;
                    comment.save();
                    console.log('after saving comment');
                    cat.comments.push(comment);
                    cat.save();
                    console.log('saved cat');

                    User.findById(req.user._id, function(err, user) {

                        if (err) {
                            console.log(err);

                        } else {
                            user.comments.push(comment);
                            user.save();
                            console.log('saved user');
                        }
                    });

                    console.log(comment);
                    res.redirect("/cats/" + cat._id);                

                }
            });
        }
    });
});

router.get('/cats/:id/edit', function(req,res) {

    var id = req.params.id;

    Cat.findById(id, function(err, cat) {

        if (err) {
            console.log(err);
        } else {
             res.render('edit.ejs', {cat:cat});
        }
    });  
});


router.put('/cats/:id', function(req,res) {

    console.log('beginning /cat/:id');

    Cat.findByIdAndUpdate(
        req.params.id, req.body.cat, function(err, updatedCat) {

            if (err) {
                console.log(err);

            } else {

                console.log('------------ req.body.cat');
                console.log(req.body.cat);

                console.log('------------ updated cat');
                console.log('updated cat');
                res.redirect('/cat/' + req.params.id);
                console.log('not redirecting?');
            }

        });


router.delete('/cats/:id',isAuthenticated, function(req,res) {

    var id = req.params.id;
    console.log('YOU ARE TRYING TO DESTROY A CAT!');

    Cat.findByIdAndRemove(id, function(err) {

        if (err) {
            console.log(err);
            res.redirect('/user');
        } else {
            res.redirect('/user');
        }
    });    
})    

});

module.exports = router;

Error:

entering get /cats/:id
{ [CastError: Cast to ObjectId failed for value "styles.css" at path "_id"]
  message: 'Cast to ObjectId failed for value "styles.css" at path "_id"',
  name: 'CastError',
  kind: 'ObjectId',
  value: 'styles.css',
  path: '_id',
  reason: undefined }

Answer 1

It seems you’re including styles.css using a relative path in your template.

So when you navigate to /cats/:id, it tries to load /cats/styles.css.

In order to avoid that, you have to use an absolute path (e.g.: /styles.css or /public/styles.css – I’d recommend serving static files from a dedicated base path).

Answer 2

Go to

<head>

and change

<link rel="stylesheet" href="style.css">

to

<link rel="stylesheet" href="/style.css">