I am developing an e-commerce website using Node, Express, Mongoose, and Bootstrap, and I am experiencing unexpected behavior regarding "bootstrap.min.css.map".
I've seen it appear in the console with the following error: 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model "Product"'.
I am also seeing it appear as the text of a button. When I remove the link to the bootstrap.min.css in my header then the expected behavior returns, but then I lose the bootstrap styling on the page.
I've searched and have seen posts about removing the following from my code: /*# sourceMappingURL=bootstrap.css.map */ via not linked to bootstrap.css.map but shows in console, but I use the cdn to include the boostrap.min.css file, so I don't think it's possible for me to do that.
It also appears for me in the dev console: DevTools failed to load SourceMap: Could not load content for http://localhost:3000/products/sort/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
I reduced the code to the smallest way I can reproduce it. The following code will show navigation buttons for pages on the left and a dropdown for sorting on the right.
Upon changing the sort the button on the left will be overridden with "bootstrap.min.css.map" as shown in the following pictures :
This is how the button looks before I change the sort
This is how the button looks after I change the sort
The following is the routes and ejs, the routes are prepended by 'products'
const express = require('express');
const router = express.Router();
const userUtil = require('../utilities/user');
const Product = require("../models/product");
let foundProducts;
let page;
let pages;
router.get("/sort", (req, res) => {
//res.send('page = ' + page);
if (foundProducts.length > 0) {
console.log('we are in the sort');
sort.sortBy(foundProducts, req.query.sortBy);
return res.render("products/products", {
products: foundProducts,
query: "",
order: req.query.sortBy,
successMsg: "",
noMessage: true,
currentPage: page,
pages: pages
});
}
res.redirect("/products");
});
router.get("/:page", async(req, res) => {
try {
page = req.params.page || 1;
const limit = 10;
const products = await Product.find({})
.limit(limit * 1)
.skip(page - 1)
.exec();
const count = await Product.estimatedDocumentCount();
pages = Math.ceil(count / limit);
foundProducts = products;
userUtil.setAdmin(req);
const successMsg = req.flash('successfulMsg')[0];
res.render("products/products", {
products: products,
successMsg: successMsg,
noMessage: (successMsg) ? false : true,
order: "",
query: "",
currentPage: page,
pages: pages
});
} catch (error) {
console.log("The error is " + error);
}
});
router.get("/", async(req, res) => {
res.redirect("/products/1");
});
module.exports = router;<!-- header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/main.css">
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- header end-->
<div class="container">
<div class="row text-center align-items-start mb-2" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-4 mt-4 mb-0">
<nav aria-label="Page navigation">
<ul class="pagination">
<% if (currentPage> 2 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
<% } %>
<% if (currentPage> 1 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) - 1 %>" aria-label="Previous">
<span aria-hidden="true"><</span>
<span class="sr-only">Previous</span>
</a>
</li>
<% } %>
<% if (pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) %>">
<%= currentPage %>
</a>
</li>
<% } %>
<% if (pages> 1 && pages > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) + 1 %>" aria-label="Next">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
<% if (pages> 1 && pages - 1 > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(pages) %>" aria-label="Last">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="col-sm-6 mt-4 mb-0">
<form action="/sort/" method="POST" class="float-right">
<div class="form-group " style="display:inline-flex;">
<label for="l-sort-by" class="mt-2 mr-2">Sort: </label>
<select class="custom-select selectpicker" name="sortBy" id="inputGroupSelect02" onchange="this.form.submit();" value="price_desc">
<option value="price_asc">Lowest Price</option>
<option value="price_desc">Highest Price</option>
<option value="name_asc">Name Ascending</option>
<option value="name_desc">Name Descending</option>
</select>
<input type="hidden" name="searched" value="<%=query%>">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$("#inputGroupSelect02 option[value='<%=order%>']").attr("selected", "selected");
</script>
<!-- footer -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>
</body>
</html>
<!-- footer end -->
