reactjsazureviteazure-static-website-hosting

React Vite with typescript on azure server static web app with GitHub reposition error

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:

  1. 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>
  1. 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',
        },
      },
    });
  1. 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.

Solution

  • "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:

    {
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "vite": "^2.6.1",
    "@vitejs/plugin-react": "^1.0.0"
  }
}

    Staticwebapp.config.json:

    {
  "mimeTypes": {
    ".js": "application/javascript",
    ".mjs": "application/javascript",
    ".jsx": "application/javascript",
    ".tsx": "application/javascript",
    ".ts": "application/javascript"
  }
}

    In your main.tsx, change the import for ReactDOM to:

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const root = document.getElementById('root');
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  root
);

    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="/build/main.js"></script>
  </body>
</html>

    Output: enter image description here

    enter image description here

    enter image description here

    Refer to this for deploying the Vite app on GitHub Pages using GitHub Actions