The issues in my code stem from incorrect file paths and MIME types, resulting in resource loading failures and incorrect MIME type responses from the server

1

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.

2

looks like a hard-coded path.

try using a relative path to your document root

perhaps

<source src="./Assets/FreshPrinceSong.mp3" type="audio/mpeg">

unless there is a rewrite rule in place but i am not getting that vibe, there is not enough info to answer this is my best guess

you could share your repo for better quicker help

d

3

Ok. My music actually plays when i run it locally with no problems.

4

Here is my code. I attempted what you shared to no avail.

5

Hi there,

I don’t see FreshPrinceSong.mp3 in your GitHub repo: https://github.com/MatrixInnovations/3DPlayground/tree/main/src/App/Assets.

Regards,

Keith
Render Support, UTC+10 :australia:

1 Like
6

I commented it out. but it works when i use the ./ directory last time i checked.

The error message i am encountering, “TypeError: ‘text/css’ is not a valid JavaScript MIME type,” seems to be related to the script tag <script type="module" src="./index.js"></script> in my HTML file. The type="module" attribute indicates that the script is a JavaScript module. When the browser encounters this script tag, it expects the linked resource (in this case, index.js ) to be a JavaScript module file. Does anyone know how to solve this issueI tried changing the type to =“text/ javascript”. To no avail. Any assistance would be great. This is the last error and I’m in production.

7

Hi there,

I think it is this line here causing you the issue. It needs the type="text/css" attribute. I’m also not sure if you need this in both the index.html and the style.css.

Regards,

Keith
Render Support, UTC+10 :australia:

8

Yes it is the issue i am about to comment it out and see if it works

9

So yes i need it. And i have tried everything it is still not compiling. I have been troubleshooting for a week+ now with this thing and getting senior developers to take a look at it to no avail. I truly don’t understand. I tried loading the javascript before the css with failed returns.

10

Hi there,

It looks like you are publishing your service from the src directory. I think it should be dist. You are also committing dist to GitHub. You should include this directory from source control as it gets built when you deploy your service.

Regards,

Keith
Render Support, UTC+10 :australia:

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.