1

I have a dockerized React application that is built via Vite. I wish I could develop it on my own separate development domain. But apparently Nginx does not allow me to do this. And I'm getting the error with my main.tsx file "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."

nginx reverse-proxy conf

server {
    # Listen to port 443 on both IPv4 and IPv6.
    listen 443 ssl;
    listen [::]:443 ssl; 

    server_name example.com;

    # Load the certificate files.
    ssl_certificate         /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

    # Load the Diffie-Hellman parameter.
    ssl_dhparam /etc/letsencrypt/dhparams/dhparam.pem;

    proxy_http_version 1.1;

    location / {
        resolver 127.0.0.11;
        set $upstream http://example_front-app:80;
        # nginx will now start if host is not reachable
        proxy_pass    $upstream;
        proxy_set_header Host            $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}

nginx configuration inside the container

server {
    listen 80;
    server_name example.com;

    root /var/www;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ =404;
    }
    
    
}

Please don't suggest that I compile files into a js extension and output them this way, I know it works. But I need hot development with ESNext

Alex
  • 21
  • 3
  • Does this answer your question? [nginx mime types and gzip](https://stackoverflow.com/questions/21788833/nginx-mime-types-and-gzip) – AD7six Feb 05 '23 at 14:26
  • note also that x-javascript is obsolete, here's a reference [Difference between application/x-javascript and text/javascript content types](https://stackoverflow.com/a/74969699/761202) (you'll find references saying all of the various mime types are deprecated, [text/javascript](https://www.ietf.org/rfc/rfc9239.pdf) is the preferred mime type at the time of writing). – AD7six Feb 05 '23 at 14:32

0 Answers0