reactjskubernetesmime-typesazure-aksmjs

MIME type of .mjs files is "text/html" when deploying React (ViteJS) app to Azure Kubernetes


I've built a React application utilizing ViteJS with TypeScript. I've built the project using tsc && vite build. I've then built the Docker image based on my Dockerfile:

FROM node:18.12.0
COPY build /build
RUN npm i -g serve
CMD ["serve", "-s", "build", "-p", "5173"]
HEALTHCHECK CMD wget --no-verbose --tries=1 --spider http://localhost:5173/ || exit 1

I've tested the Docker Image locally, and it builds as intended and when run the container boots up and the application is accessible and wors as it should.

I've been following Microsofts documentation for utilizing an Nginx Ingress Controller: Create an ingress controller in Azure Kubernetes Service (AKS)

So, my manifest for this service looks like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: aks-helloworld-one  
spec:
  replicas: 1
  selector:
    matchLabels:
      app: aks-helloworld-one
  template:
    metadata:
      labels:
        app: aks-helloworld-one
    spec:
      containers:
      - name: aks-helloworld-one
        image: ghcr.io/akusasdesign/localizer:test-serve
        ports:
        - containerPort: 5173
        env:
        - name: TITLE
          value: "Welcome to Azure Kubernetes Service (AKS)"
      imagePullSecrets:
        - name: github-container-registry
---
apiVersion: v1
kind: Service
metadata:
  name: aks-helloworld-one  
spec:
  type: ClusterIP
  ports:
  - port: 5173
  selector:
    app: aks-helloworld-one

The service and Deployment are both created, but when moving to the url, the page is white/blank. Checking the console I can see the error message:

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.

I've done some searching, but can't find a reason/fix for this problem.


Solution

  • The MIME type for .mjs files needs to be text/javascript.
    For more innformation check out the MDN documentation about that topic.