Refused to execute script because its MIME TYPE

Question

I'm using Laravel 5.4 and Vue.js on a LEMP Stack 16.04. My site is using a Let's encrypt certificate.

My assets are compiled with Laravel Mix and inserted in my application

<script src="{{mix("/js/manifest.js")}}"></script>
<script src={{mix("/js/vendor.js")}}></script>
<script src="{{ mix('/js/app.js') }}"></script>

Situation

When I go to https://example.com

Refused to execute script from 'https://example.com/js/app.6fb8b055657fe5daae8f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

The file app.6fb8b055657fe5daae8f.js type is text/html but there is another call whose initiator is app.6fb8b055657fe5daae8f.js and whose type is script. Don't know if this is normal

Questions

Is that normal MIME Type is recognized as text/html whereas it is my app.js file ?

What can I do to make it work ? Is it a issue with nginxor laravel or `SSL Certificate ?

nGinx used (custom compile)

built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4) 
built with OpenSSL 1.0.2g  1 Mar 2016
TLS SNI support enabled
configure arguments: --add-module=/home/leo/ngx_brotli --sbin-path=/usr/sbin/nginx --add-module=/home/leo/ngx_pagespeed-1.12.34.2-beta --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --with-debug --with-pcre-jit --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_v2_module --with-http_sub_module --with-http_xslt_module --with-stream --with-stream_ssl_module --with-mail --with-mail_ssl_module --with-threads

example.com.conf

server {
        listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;
        server_name example.com www.example.com;
        return 301 https://$server_name$request_uri;
}

#server {
 # server_name ~^(.*)\.example\.com$ ;
  #root www/laravel/public ;
#}


server {

        # SSL configuration

    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    include snippets/ssl-example.com.conf;
    include snippets/ssl-params.conf;


        root /var/www/laravel/public;
        index index.php index.html index.htm;

        # Make site accessible from http://localhost/
        server_name example.com *.example.com www.example.com ;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.php?$query_string;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }
        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }

          location ~ /.well-known {
                allow all;
        }
}

nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/ja$

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

/etc/nginx/mime.types

types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/javascript                js;
    application/atom+xml                  atom;
    application/rss+xml                   rss;

    ............
    ............
}

Answer 1

Check your code first.

<script src="{{mix("/js/manifest.js")}}"></script>
<script src={{mix("/js/vendor.js")}}></script>
<script src="{{ mix('/js/app.js') }}"></script>

It's even highlighted in your question, now check this one:

<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

and see if this helps.