I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The errors being displayed seem to be related to the script and link tags within the header and footer files.
Error details: (custom scripts and links are also causing these issues)
5ab70c4e84fa1b212efa0145:5 GET http://localhost:5000/home/scripts/lib/jquery-3.3.1.min.js net::ERR_ABORTED 5ab70c4e84fa1b212efa0145:1
Refused to execute script from 'http://localhost:5000/home/scripts/lib/jquery-3.3.1.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
5ab70c4e84fa1b212efa0145:1 Refused to apply style from 'http://localhost:5000/home/stylesheets/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The code for my header and footer partials are as follows:
Header:
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="scripts/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="scripts/lib/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
<link type="text/css" rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><i class="far fa-heart"></i> The Beanie Boo Network</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<% if(!currentUser){ %>
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
<% } else { %>
<li><a href="#"><%=currentUser.username%></a></li>
<li><a href="/logout">Logout</a></li>
<% } %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
Footer:
</div>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
Working file content: (full)
<% include ../partials/header %>
<header class="jumbotron">
<div>
<h1>Beanie Booboard</h1>
<h4>Keep up to date with whats going on on The Beanie Boo Network</h4>
</div>
</header>
<% posts.forEach(function(post){ %>
<div class="thumbnail">
<div class="row">
<div class="caption col-sm-6">
<div class="container">
<h2><%=post.title%></h2>
<p><%=post.content.substring(0, 50)%>...</p>
<p><em><%=post.author%></em></p>
<p><%=post.created.toDateString()%></p>
<a href="/home/<%=post._id%>"class="btn btn-xs btn-danger">Read More</a>
</div>
</div>
<div class="thumbnail-img col-sm-6">
<img class="img-responsive" src="<%=post.image%>">
</div>
</div>
</div>
<% }); %>
<% include ../partials/footer %>
Non-working file content: (full)
<% include ../partials/header %>
<% include ../partials/footer %>
I am trying to understand why one file is encountering errors while the other is not, how I can prevent this issue in the future, and how to resolve it should it occur again?