Menu
I am running a nginx web server which contains the build files from the vite application. I can run this application locally in dev mode without any problem. The issue arrives when running nginx webserver and the assets files are not in the correct format. The .css file is working as intended, but the javascript tag in the generated index.html by yarn build has type module which is interpreted in the browser as text/html. This is the generated error found in console:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
Opening the network tab in the browser the request and fetched javascript is correct. But looking in the sources the javascript file is not present.
<head> in build index.html file<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/vite.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage management</title>
<script type="module" crossorigin="" src="/assets/index-5b6aa355.js"></script>
<link rel="stylesheet" href="/assets/index-a7ac0d48.css">
</head>
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
export default ({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
return defineConfig({
define: { "process.env": env },
plugins: [react()],
base: '/',
build: {
outDir: 'dist',
assetsDir: 'assets',
emptyOutDir: true,
},
resolve: {
extensions: ['.js','.mjs', '.ts', '.jsx', '.tsx', '.json'],
}
})
}
FROM node:21-alpine as builder
WORKDIR /front-end
COPY . /front-end
RUN yarn install
RUN yarn build --base=/
FROM nginx:1.25.3-alpine
COPY --from=builder /front-end/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8000
CMD [ "nginx", "-g", "daemon off;" ]
services:
frontend-web:
tty: true
build:
context: ./../front-end
dockerfile: ./../front-end/dockerfile
ports:
- "8000:8000"
env_file: docker.env
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
/* Bundler mode */
"moduleResolution":"Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.js", "src/**/*.tsx", "src/**/*.html"],
"references": [{ "path": "./tsconfig.node.json" }]
}
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 8000;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
}
852
asked May 09 '26 13:05
Solution for me was to include mime.types from nginx.
I used nginx:stable not alpine, so I hope it works in alpine too.
Try add include /etc/nginx/mime.types; to nginx.conf.
worker_processes 1;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
server {
listen 8000;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With