I am trying to launch an React Vite static website on Azure static websites and I am constantly getting this error "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec." on the main.tsx file. I have looked everywhere but still nobody had resolved this issue.
I have tried to do these things because of either other stackOwerflow questions or by using ChatGPT:
- I’ve added and changed the staticwebapp.config.json:
{
"mimeTypes": {
".jsx": "application/javascript",
".tsx": "application/javascript",
".js": "application/javascript",
".mjs": "application/javascript",
".ts": "application/javascript"
}
}
and with this I got this error: "Uncaught SyntaxError: Unexpected token '<' (at main.tsx:8:3)", my main.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Book App</title>
</head>
<body>
<h1>Please work</h1>
<div id="root"></div>
<script type="module" src="src/main.tsx"></script>
</body>
</html>
- I’ve tried to change the vite.config.ts to this:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
target: 'esnext',
},
server: {
mimeType: {
'.js': 'application/javascript',
'.mjs': 'application/javascript',
'.jsx': 'application/javascript',
'.tsx': 'application/javascript',
},
},
});
- I’ve launched the static web with VS code Static Azure web extension like in the Vite docs and still nothing.
I am wondering if I should use something different than Vite that will work but I also want it to be as good as Vite.
"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'application/octet-stream'," suggests that the server is not recognizing your TypeScript file as a valid JavaScript module.
Package.json:
Staticwebapp.config.json:
In your
main.tsx, change the import forReactDOMto:index.html:
Output:
Refer to this for deploying the Vite app on GitHub Pages using GitHub Actions