title: CastError: Cast to ObjectId failed
body: <p>Here are some of my snippets of code:
  <strong>app.js</strong>:</p>
  <pre><code>var express = require(&quot;express&quot;),
              app = express(),
     mongoose = require(&quot;mongoose&quot;),
   bodyParser = require('body-parser'),
   Campground = require(&quot;./models/campground&quot;),
       seedDB = require(&quot;./seed.js&quot;);
  
  app.use(bodyParser.urlencoded({extended:true}));
  app.use(express.static(&quot;public&quot;))
  mongoose.connect(&quot;mongodb://localhost/yelp_camp&quot;); //creating a data base
  
  seedDB();
  
  
  app.get(&quot;/&quot;,function(req,res){
      res.render(&quot;landing.ejs&quot;)
  })
  app.get(&quot;/campgrounds&quot;,function(req,res){
  
      Campground.find({}, function(err, allCampgrounds){
          if(err) {console.log(err)}
          else {res.render(&quot;campgrounds.ejs&quot;,{data:allCampgrounds});}
      })
  
  });
  
  app.post(&quot;/addCampground&quot;,function(req,res){
      // var parsedData=
      var name= req.body.name;
      var image=req.body.image;
      var newCampground={name: name, image: image};
      Campground.create({
          name: newCampground.name,
          image: newCampground.image
      }, function(err, newlyCreated){
          if(err) {console.log(err)}
          else {
              newlyCreated.save();
              res.redirect(&quot;/campgrounds&quot;)}
      });
  f
  })
  app.get(&quot;/campgrounds/new&quot;,function(req,res){
      res.render(&quot;new.ejs&quot;);
  })
  
  app.get(&quot;/info/:id&quot;, function (req, res) {
      Campground.findById(req.params.id, function (err, foundCampground) {
          if (err) throw err;
          else {
              console.log(foundCampground.name);
              res.render(&quot;info.ejs&quot;, {campground: foundCampground})
          }
      })
  });
  
  app.listen(3000,process.env.IP,function(){
      console.log(&quot;Server has started&quot;);
  })
  </code></pre>
  <p>and here is my <strong>info.ejs</strong>:</p>
  <pre><code>&lt;%- include(&quot;partials/header.ejs&quot;)%&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;h3&gt;&lt;%= campground.name%&gt;&lt;/h3&gt;
      &lt;img class=&quot;info_pic&quot; src=&quot;&lt;%= campground.image%&gt;&quot; alt=&quot;...&quot;&gt;
      &lt;form action=&quot;/comment_add&quot; method=&quot;post&quot;&gt;
          &lt;textarea placeholder=&quot;Comment here&quot; name=&quot;add_comment&quot;&gt;&lt;/textarea&gt;
          &lt;button&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;%- include(&quot;partials/footer.ejs&quot;)%&gt;
  </code></pre>
  <p>header.ejs:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;app.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap.css&quot;&gt;
      &lt;title&gt;YelpCamp&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;span&gt;&lt;a href=&quot;/&quot;&gt;YelpCamp&lt;/a&gt;&lt;/span&gt;
          &lt;a href=&quot;/get-along&quot; class=&quot;go-right&quot;&gt;Signup&lt;/a&gt;
          &lt;a href=&quot;/add&quot; class=&quot;go-right&quot;&gt;Login&lt;/a&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>finally my <strong>app.css</strong>:</p>
  <pre><code>body{
      background-image: url(&quot;https://static.vecteezy.com/system/resources/thumbnails/000/209/776/small/crumpled-paper-background-1406.jpg&quot;);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  nav{
      background-color: black;
      color: white;
      font-size: 25px;
  }
  nav span{
      font-size: 35px;
      padding: 0 10px;
  }
  nav a{
      color: white;
  }
  .go-right{
      float: right;
      padding: 0 5px;
  }
  .full-width{
      width: 100%;
      margin-top: 5px;
  }
  .img-resize{
      height: 150px;
      width: 100%;
  }
  .info_pic{
      width:50%;
      height: 50%;
  }
  </code></pre>
  <p>I have two queries, one when I start the server, and do a get request for &quot;<strong>/info/:id</strong>&quot;, server gets disconnected and following error is returned:</p>
  <pre><code>D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\mongoose\lib\helpers\promiseO
  rCallback.js:19
              throw error;
              ^
  
  CastError: Cast to ObjectId failed for value &quot;app.css&quot; at path &quot;_id&quot; for model &quot;
  Campground&quot;
      at model.Query.exec (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4m
  mongoose←[24m\lib\query.js:4351:21)
      at model.Query.Query.findOne (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_mod
  ules\←[4mmongoose←[24m\lib\query.js:2220:8)
      at Function.findOne (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4m
  mongoose←[24m\lib\model.js:2186:13)
      at Function.findById (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4
  mmongoose←[24m\lib\model.js:2112:15)
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\app.js:48:13
      at Layer.handle [as handle_request] (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\n
  ode_modules\←[4mexpress←[24m\lib\router\layer.js:95:5)
      at next (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mexpress←[24m
  \lib\router\route.js:137:13)
      at Route.dispatch (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mex
  press←[24m\lib\router\route.js:112:3)
      at Layer.handle [as handle_request] (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\n
  ode_modules\←[4mexpress←[24m\lib\router\layer.js:95:5)
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mexpress←[24m\lib\r
  outer\index.js:281:22
      at param (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mexpress←[24
  m\lib\router\index.js:354:14)
      at param (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mexpress←[24
  m\lib\router\index.js:365:14)
      at Function.process_params (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modul
  es\←[4mexpress←[24m\lib\router\index.js:410:3)
      at next (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mexpress←[24m
  \lib\router\index.js:275:10)
      at SendStream.error (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4m
  serve-static←[24m\index.js:121:7)
  ←[90m    at SendStream.emit (events.js:310:20)←[39m
  Emitted 'error' event on Function instance at:
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmongoose←[24m\lib\
  model.js:4893:13
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmongoose←[24m\lib\
  helpers\promiseOrCallback.js:16:11
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmongoose←[24m\lib\
  model.js:4914:21
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmongoose←[24m\lib\
  query.js:4382:18
      at model.Query.&lt;anonymous&gt; (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modul
  es\←[4mmongoose←[24m\lib\query.js:2125:5)
      at model.Query._wrappedThunk [as _findOne] (D:\ujjwal\Ujjwal Web Dev\yelpcam
  pdemo\node_modules\←[4mmongoose←[24m\lib\helpers\query\wrapThunk.js:16:8)
      at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mkareem←[24m\index.
  js:369:33
  ←[90m    at processTicksAndRejections (internal/process/task_queues.js:79:11)←[3
  9m {
    messageFormat: ←[90mundefined←[39m,
    stringValue: ←[32m'&quot;app.css&quot;'←[39m,
    kind: ←[32m'ObjectId'←[39m,
    value: ←[32m'app.css'←[39m,
    path: ←[32m'_id'←[39m,
    reason: Error: Argument passed in must be a single String of 12 bytes or a str
  ing of 24 hex characters
        at new ObjectID (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mbs
  on←[24m\lib\bson\objectid.js:59:11)
        at castObjectId (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmo
  ngoose←[24m\lib\cast\objectid.js:25:12)
        at ObjectId.cast (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mm
  ongoose←[24m\lib\schema\objectid.js:267:12)
        at ObjectId.SchemaType.applySetters (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo
  \node_modules\←[4mmongoose←[24m\lib\schematype.js:1031:12)
        at ObjectId.SchemaType._castForQuery (D:\ujjwal\Ujjwal Web Dev\yelpcampdem
  o\node_modules\←[4mmongoose←[24m\lib\schematype.js:1459:15)
        at ObjectId.SchemaType.castForQuery (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo
  \node_modules\←[4mmongoose←[24m\lib\schematype.js:1449:15)
        at ObjectId.SchemaType.castForQueryWrapper (D:\ujjwal\Ujjwal Web Dev\yelpc
  ampdemo\node_modules\←[4mmongoose←[24m\lib\schematype.js:1428:15)
        at cast (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mmongoose←[
  24m\lib\cast.js:326:32)
        at model.Query.Query.cast (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modu
  les\←[4mmongoose←[24m\lib\query.js:4740:12)
        at model.Query.Query._castConditions (D:\ujjwal\Ujjwal Web Dev\yelpcampdem
  o\node_modules\←[4mmongoose←[24m\lib\query.js:1865:10)
        at model.Query.&lt;anonymous&gt; (D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_mod
  ules\←[4mmongoose←[24m\lib\query.js:2122:8)
        at model.Query._wrappedThunk [as _findOne] (D:\ujjwal\Ujjwal Web Dev\yelpc
  ampdemo\node_modules\←[4mmongoose←[24m\lib\helpers\query\wrapThunk.js:16:8)
        at D:\ujjwal\Ujjwal Web Dev\yelpcampdemo\node_modules\←[4mkareem←[24m\inde
  x.js:369:33
    ←[90m    at processTicksAndRejections (internal/process/task_queues.js:79:11)←
  [39m
  }
  </code></pre>
  <p>Second, my <strong>app.css</strong> is not getting loaded with some ejs files, while it gets loaded with other ones.</p>