Refused to apply style from css MIME Type

Question

I used vite to create a react app with typescript and I follow a tutorial to get a good starter (video). I have another application in angular and it works fine with this approach I'm deploying it to kubernetes using ngix, but with vite i'm facing this error and I don't know the cause:

plint2dev.linguaserve.net/:16 Refused to apply style from 'https://plint2dev.linguaserve.net/assets/index.2518dafb.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.f2ba2231.js:1

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 nginx config and the repository code can be revised here. I tried all the alternatives provided here, but no one works for me.

My actual nginx.conf:

pid /run/nginx.pid;
worker_processes auto;
worker_rlimit_nofile 65535;

events {
        multi_accept on;
        worker_connections 65535;
}

http {
        client_max_body_size 100M;
        charset utf-8;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        server_tokens off;

        # MIME
        include mime.types;
        default_type application/octet-stream;

        # logging
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log warn;

        # load configs
        include /etc/nginx/conf.d/*.conf;

        # linguaserve.net
        server {
                  listen 80;
                  listen [::]:80;
                  server_name .linguaserve.net;

                  set $base /usr/share/nginx/html;

                  # security headers
                  add_header X-Frame-Options "SAMEORIGIN" always;
                  add_header X-XSS-Protection "1; mode=block" always;
                  add_header X-Content-Type-Options "nosniff" always;
                  add_header Referrer-Policy "no-referrer-when-downgrade" always;
                  add_header X-Request-ID  $request_id;

                  location / {
                    try_files $uri $uri/ /index.html;
                  }

                  # . files
                  location ~ /\.(?!well-known) {
                    deny all;
                  }

                  # logging
                  access_log /var/log/nginx/access.log;
                  error_log /var/log/nginx/error.log warn;

                  # favicon.ico
                  location = /favicon.ico {
                    log_not_found off;
                    access_log off;
                  }


                  # gzip
                  gzip on;
                  gzip_vary on;
                  gzip_proxied any;
                  gzip_comp_level 6;
                  gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
        }
}

From here, I'm totally lost. Any help would be appreciated. My dockerfile

FROM nginx

## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/nginx.conf

COPY /dist/* /usr/share/nginx/html/

RUN  cd /usr/share/nginx
RUN  ln -s /usr/share/nginx/html /usr/share/nginx/www
RUN  ln -s /usr/share/nginx/html /etc/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Nginx cannot find either of the files and is returning `index.html` instead. — Richard Smith, Sep 29 '22 at 10:07

score 1 · Accepted Answer · answered Sep 30 '22 at 07:21

Finally, i solved it. It was a silly mistake. In my dockerfile, I copied all the files from dist, but no the directory structure.

Before:

dist
│   index.12321.js
│   index.12321.css
│   index.html
│   vite.svg.

Now:

dist  
└───assests
│   │   index.12321.js
│   │   index.12321.css
│   index.html
│   vite.svg.

The solution was change this command

COPY /dist/* /usr/share/nginx/html/

to this COPY /dist/ /usr/share/nginx/html/

Removing the * solved the pain.

Refused to apply style from css MIME Type

1 Answers1