CSS & Javascript not loaded when using SSL

[dorinniscu]

• Laravel Version: 8.17.2
• Nova Version: 3.16.3
• PHP Version: 7.4
• Database Driver & Version: MySQL 5.7
• Operating System and Version: Windows 10
• Browser type and version: 87.0.4280.66 (Official Build) (64-bit)
• Laravel Homestead: 9.5.1
• Nginx: 1.15.8

Everything works fine when using http (http://laravelnova.test/nova).

When using https the app does not load CSS & Javascript

Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://laravelnova.test/vendor/nova/app.css?id=...".

Uncaught ReferenceError: CreateNova is not defined at nova:143

nova:150 Uncaught ReferenceError: Nova is not defined at nova:150

vendor/nova/manifest.js, vendor/nova/vendor.js, vendor/nova/app.js return this instead of the right code (accessed with https):

!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="",t.oe=function(r){throw console.error(r),r}}([]);

[crynobone]

Have you updated to v3.16.3 and run php artiasn nova:publish

[dorinniscu]

@crynobone It is a fresh install but I run the publish command just to make sure

php artisan nova:publish
php artisan view:clear

[crynobone]

I was able to run everything properly with https on valet. This could be an issue with nginx rather than Laravel or Laravel Nova.

[dorinniscu]

I understand. I will check the nginx config than. Thanks.

[crynobone]

Closing this for now, but feel free to share if any new details that we can look at.

[dorinniscu]

I see a strange behavior.

When I access directly vendor/nova/manifest.js, vendor/nova/vendor.js, vendor/nova/app.js, all of them return the same content of vendor/nova/manifest.js. It is like manifest.js code is cached in all js files.

!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="",t.oe=function(r){throw console.error(r),r}}([]);

After refresh return the right code.

When closing the tab and access again I see the same behavior: manifest.js code than the right code.