I am new to web development and trying to deploy a website I have created with these tech stacks. I have had it running locally, and then ran the npm run build to generate the manifest.json file.
Locally the website works fine, however when i take it to the internet I get this error. " Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. "
The website it not returning the .js or .css files and rather the index.blade.php html text.
Here are some parts of my code, starting with the index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<!-- Bootstrap -->
@vite('resources/css/bootstrap.min.css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
@vite('resources/css/app.css')
</head>
<body class="antialiased">
<div id="app" class="container-sm">App not working...</div>
</body>
@vite('resources/js/app.js')
</html>
Here is the manifest.json file
{
"resources/css/app.css": {
"file": "assets/app-X8Z-xCxC.css",
"isEntry": true,
"src": "resources/css/app.css"
},
"resources/css/bootstrap.min.css": {
"file": "assets/bootstrap-Sq5YoTzA.css",
"isEntry": true,
"src": "resources/css/bootstrap.min.css"
},
"resources/js/app.js": {
"file": "assets/app-T_x8cpmq.js",
"isEntry": true,
"src": "resources/js/app.js"
}
}
I greatly appreciate any help as i have been struggling with this for a day now.
I have tried looking at the network tab on chrome inspect to see if it was retrieving the .js and .css files, however it was returning 200, and the index.blade.php html text.
When i look at the same thing locally, it returns the correct js or css file.