VITE:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type

Question

I am seeing the following error in the browser when I launch my web page for production.

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.

My code is Reactjs and I am serving it from nodejs

URL = https://qaentry.domain.com/It

VITE package.json

  "scripts": {
    "dev": "vite --base=/pmo",
    "build": "tsc && vite build --base=/pmo",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite  --base=/pmo preview"
  },

APP.tsx

const router = createBrowserRouter([
    {
      path: "/pmo",
      element: <LandingPage />,
    }
])

client path

- client
---dist
-----assets
------ index--_a54pe.js

-----index.html

SERVER.js

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});

VITE congfig

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  build:{
    outDir: "dist"
  }
})

It works using localhost but not in production. Can you give me some hints for solving this issue

Answer 1

You've told Vite to build your app expecting it to be served under the /pmo base directory but your express app is serving index.html at /.

Without changing your Vite build, you need to do a few things...

1. Get Express to serve the static resources under the expected path

   app.use('/pmo', express.static(path.join(__dirname, '../../client/dist'));
   

2. Serve the index.html and any dynamic paths under the expected path

   app.get('/pmo/*', (req, res) => {
     res.sendFile(path.join(__dirname, '../../client/dist/index.html'));
   });
   

3. Tell the BrowserRouter that routes and links should be placed under a basename

   const router = createBrowserRouter(
     [
       {
         path: '/',
         element: <LandingPage />,
       },
     ],
     {
       basename: import.meta.env.BASE_URL, // dynamically get from Vite config
     },
   );