Caprover nginx host mjs files

Question

I have a caprover application with this nginx code:

<%
if (s.forceSsl) {
%>
    server {
        listen       80;

        server_name  <%-s.publicDomain%>;

        # Used by Lets Encrypt
        location /.well-known/acme-challenge/ {
            root <%-s.staticWebRoot%>;
        }

        # Used by CapRover for health check
        location /.well-known/captain-identifier {
            root <%-s.staticWebRoot%>;
        }

        location / {
            return 302 https://$http_host$request_uri;
        }
    }
<%
}
%>


server {

    <%
    if (!s.forceSsl) {
    %>
        listen       80;
    <%
    }
    if (s.hasSsl) {
    %>
        listen              443 ssl http2;
        ssl_certificate     <%-s.crtPath%>;
        ssl_certificate_key <%-s.keyPath%>;
    <%
    }
    %>

        client_max_body_size 500m;

        server_name  <%-s.publicDomain%>;

        # 127.0.0.11 is DNS set up by Docker, see:
        # https://docs.docker.com/engine/userguide/networking/configure-dns/
        # https://github.com/moby/moby/issues/20026
        resolver 127.0.0.11 valid=10s;
        # IMPORTANT!! If you are here from an old thread to set a custom port, you do not need to modify this port manually here!!
        # Simply change the Container HTTP Port from the dashboard HTTP panel
        set $upstream http://<%-s.localDomain%>:<%-s.containerHttpPort%>;

        location / {

    <%
    if (s.httpBasicAuthPath) {
    %>
            auth_basic           "Restricted Access";
            auth_basic_user_file <%-s.httpBasicAuthPath%>; 
    <%
    }
    %>

            proxy_pass $upstream;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

    <%
    if (s.websocketSupport) {
    %>
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_http_version 1.1;
    <%
    }
    %>
        }

        # Used by Lets Encrypt
        location /.well-known/acme-challenge/ {
            root <%-s.staticWebRoot%>;
        }
        
        # Used by CapRover for health check
        location /.well-known/captain-identifier {
            root <%-s.staticWebRoot%>;
        }

        error_page 502 /captain_502_custom_error_page.html;
        location = /captain_502_custom_error_page.html {
                root <%-s.customErrorPagesDirectory%>;
                internal;
        }
}

I want to host my storybook static build with .mjs files index.html looks like:

    <script type="module">
      import './sb-manager/runtime.mjs';

      
      import './sb-addons/links-0/manager-bundle.mjs';
      
      import './sb-addons/essentials-controls-1/manager-bundle.mjs';
      
      import './sb-addons/essentials-actions-2/manager-bundle.mjs';
      
      import './sb-addons/essentials-backgrounds-3/manager-bundle.mjs';
      
      import './sb-addons/essentials-viewport-4/manager-bundle.mjs';
      
      import './sb-addons/essentials-toolbars-5/manager-bundle.mjs';
      
      import './sb-addons/essentials-measure-6/manager-bundle.mjs';
      
      import './sb-addons/essentials-outline-7/manager-bundle.mjs';
      
      import './sb-addons/interactions-8/manager-bundle.mjs';
      
    </script>

But i getting error: nginx 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.

I need some help with this nginx conf. I tried to add include /etc/nginx/mime.types; But nothing else.

Answer 1

the problem is the Nginx server. The mime type extension ‘mjs’ is unknown and nginx is using the default mime type of ‘application/octet’. Npx knows the relationship mapping so no problem.

Update the nginx.conf file in the server section under ‘include mime.types;’ to include the new type.

include mime.types;
types {
   application/javascript js mjs;
}