FreshPrinceSong.mp3:1
Failed to load resource: the server responded with a status of 404 ()
style.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/css”. Strict MIME type checking is enforced for module scripts per HTML spec.
how is it even saying this when my application is client-side application for failed to load resource. Next why Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/css” This error suggests that the browser attempted to load a module script (JavaScript) but received a CSS file instead. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css" />
<meta charset="utf-8">
<title>Andrew Lowery's 3D Playground (ThrowBack Fresh Prince)</title>
</head>
<body>
<!-- Embedding the audio file -->
<audio autoplay>
<source src="/App/Assets/FreshPrinceSong.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Script to hide the audio player -->
<script>
window.addEventListener('load', function() {
var audioPlayer = document.querySelector('audio');
audioPlayer.style.display = 'none';
});
</script>
<canvas class="threejs"></canvas>
<script type="module" src="./index.js"></script>
<div class="overlay"></div>
<h1 class="loading">Loading Experience... <span id="progressPercentage"></span>%</h1>
<button class="start">START</button>
<div id="myModal" class="modal">
<div class="modal-wrapper">
<div class="modal-content">
<h1 id="modalTitle">Modal Title</h1>
<img id="modalImage" src="/App/Assets/HighTop.jpeg" alt="Modal Image">
<!-- <img id="modalImage" src="/App/Assets/FRB.jpeg" alt="Modal Image"> -->
<p id="modalDescription">Modal Description</p>
</div>
<span class="close">Close</span>
</div>
</div>
</body>
</html>
In my HTML file, I’m using the following line to import the JavaScript file:
<script type="module" src="./index.js"></script>
This line tells the browser to load index.js as a JavaScript module. However, if my server is not configured to serve JavaScript files with the correct MIME type, I might encounter the error I described. By the way this is just a client side application and i built it with the Three.js library.
