Hadil66 / your-tribe-for-life-squad-page

Maak met een team een squadpage met Directus en Sveltekit
https://your-tribe-for-life-squad-page-beta.vercel.app
MIT License
2 stars 0 forks source link

foutmelding wanneer csr = true #60

Open lisagjh opened 2 days ago

lisagjh commented 2 days ago

Wanneer in +page.js : export let csr = true staat, krijgen we een 500 internal error en deze foutmelding erbij:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.

de error:

Scherm­afbeelding 2024-09-16 om 20 03 03

waarom werkt het wel wanneer client side rendering uit staat, en niet wanneer dit aan staat?

Hiervoor moet ik eerst begrijpen wat er precies gebeurt bij CSR en SSR

de foutmelding

De foutmelding die je krijgt bij csr = true ("Expected a JavaScript module script but the server responded with a MIME type of 'image/jpeg'") betekent dat de browser een javascript module probeert te laden, maar in plaats daarvan een afbeelding ontvangt. Dit komt doordat er iets fout gaat bij het laden van een bestand in de browser bij client side rendering.

Als je naar de foutmelding kijkt zie je dat het gaat om de fallback avatar, dark-side-of-the-moon. Maar als ik bij network kijk, staat er bij dit plaatje wel als status 200 OK.

Scherm­afbeelding 2024-09-16 om 20 39 47

CSR en SSR

Wanneer csr = true is ingesteld, wordt de pagina op de client-side gerenderd, en moet de browser zelf alle javascript modules en andere resources zoals afbeeldingen laden. Als de browser een verkeerd bestandstype ontvangt wanneer het een javascript module verwacht, geeft het dus zo een soort foutmelding. Dus dit betekent dat er ergens in de code of op de server een verkeerd pad word gebruikt, of de server niet het juiste MIME-type doorgeeft waardoor de browser denkt dat de afbeelding een script is.

Waneer csr = true doet de server al het werk om de pagina te bouwen, en krijgt de browser volledig gerenderde html. Dan hoeft de browser dus geen dynamische dingen of modules te laden, en word die fout voorkomen.

SamaraFellaDina commented 1 day ago

ab10c41a48b17b53d7d2d10cc54cdab08ed2e3d7

hee! Ik had de csr even uitgezet :) Nu zijn de bugs hopelijk weg!

lisagjh commented 1 day ago
17-9

De error is weer terug, maar nu is de csr= true/false helemaal weg, dus dat kan de oorzaak niet zijn.

Ik heb voor nu even alles wat met die fallback image te maken heeft eruit gehaald, zodat ik in ieder geval wel verder kan.

Ik weet van Sammy en Hadil dat die deze error niet krijgen, dus misschien dat het inderdaad ergens aan een install ligt? Ik weet momenteel in ieder geval niet hoe ik dit moet uitzoeken.