Slik fikser du en tom hvit side i webappen din

En tom hvit side betyr nesten alltid én av to ting: JavaScript-en i appen krasjet før noe ble tegnet, eller JavaScript-en ble aldri lastet. Åpne konsollen i nettleseren (høyreklikk → Inspiser → Konsoll), les den første røde feilen, og sjekk deretter fanen Nettverk for filer som ikke lastet. De fleste årsakene er en manglende miljøvariabel, feil basis-sti, et bygg som ikke ble ferdig, eller et krasj i én komponent.

Denne guiden dekker enkeltsideapper bygget med React, Vue eller lignende rammeverk (inkludert apper laget av AI-byggere), som er der tomme sider oftest oppstår.

Hvorfor siden er hvit

En moderne enkeltsideapp (SPA) sender nettleseren en nesten tom HTML-fil, omtrent slik:

<body>
  <div id="root"></div>
  <script type="module" src="/assets/index-a1b2c3.js"></script>
</body>

JavaScript bygger deretter hele siden inne i den tomme div-en. Hvis skriptet ikke lastes, eller kaster en feil før det rendrer, forblir div-en tom, og du ser hvitt. Siden er ikke «ødelagt» på en synlig måte; den ble bare aldri tegnet.

Derfor starter feilsøkingen alltid i utviklerverktøyene, ikke på selve siden.

Steg 1: Les konsollen

Åpne utviklerverktøyene: høyreklikk på siden og velg Inspiser, eller trykk F12 (Cmd+Option+I på Mac). Gå til fanen Konsoll og last siden på nytt.

Se på den første røde feilen; senere feil er ofte bieffekter. Det den sier peker mot årsaken:

Kopier hele feilteksten, inkludert filnavnet og linjenummeret. Hvis du bruker en AI-bygger, lim den rett inn i chatten.

Steg 2: Sjekk at filene ble lastet

Åpne fanen Nettverk, huk av for Deaktiver cache, og last siden på nytt. Se på forespørslene for .js- og .css-filer.

• Status 404 på en JavaScript-fil: siden ber om en fil som ikke finnes på serveren.
• Status 200, men typen er text/html: serveren returnerte en side (ofte index.html selv, på grunn av en SPA-fallback) i stedet for skriptet. Samme rotårsak: filen er ikke der siden forventer den.

Vanlige årsaker:

Feil basis-sti. Hvis appen serveres fra en undermappe, som eksempel.no/app/, men er bygget for å laste filer fra /assets/..., bommer alle skriptforespørsler. I Vite er dette base-alternativet i vite.config; i Create React App er det feltet homepage; i Next.js er det basePath. Den må stemme med hvor appen faktisk serveres.

Utdatert index.html. Byggeverktøy gir filer navn med et innholdshash, som index-a1b2c3.js. Etter en ny deploy er den gamle filen borte. Hvis en nettleser eller et CDN fortsatt har den gamle index.html i cache, ber den om den gamle filen og får ingenting. En hard oppdatering (Cmd+Shift+R eller Ctrl+Shift+R) bekrefter dette. Den langsiktige løsningen er å servere index.html med en kort eller ingen cache-header, mens filer med hash caches lenge.

Bygget ble ikke ferdig eller ble ikke deployet. Hvis bygget feilet, kan hosten servere en gammel eller tom byggemappe. Sjekk byggeloggen for feil.

Feil mappe er publisert. Hosten må servere byggeresultatet (vanligvis dist eller build), ikke prosjektets kildemappe. Hvis du serverer kilden, får du en index.html som peker til /src/main.tsx, som nettlesere ikke kan kjøre.

Steg 3: Sjekk miljøvariabler

Frontend-apper leser ofte innstillinger som en API-URL eller en offentlig nøkkel under bygging. Hvis en variabel mangler på den publiserte bygget, vil kode som createClient(undefined, undefined) kaste en feil med en gang, og siden blir hvit.

Ting du bør vite:

• I Vite er bare variabler med prefikset VITE_ tilgjengelige i kode i nettleseren, og leses som import.meta.env.VITE_NAVN. I Create React App er prefikset REACT_APP_; i Next.js er det NEXT_PUBLIC_.
• Disse verdiene bakes inn når appen bygges. Å legge til en variabel etter bygget gjør ingenting før du bygger og deployer på nytt.
• Forhåndsvisningen eller den lokale maskinen din kan ha en .env-fil som produksjonsbygget ikke har. Sett de samme variablene på hosten.
• Alt med disse prefiksene havner i offentlig JavaScript. Legg bare offentlige verdier der, aldri hemmelige nøkler.

En rask test: søk i konsollfeilen etter undefined i nærheten av et innstillingsnavn, eller spør:

Den publiserte appen viser en tom side. List opp hver miljøvariabel frontenden leser, sjekk hvilke som mangler eller er tomme i det publiserte bygget, og gjør at appen viser en tydelig feilmelding i stedet for en tom side når en mangler.

Steg 4: Fiks krasjet

Hvis konsollen viser en vanlig JavaScript-feil, krasjet koden under rendring. Typiske årsaker i AI-bygde apper:

• Data er ikke lastet ennå. En komponent leser user.name før user har kommet. Løsningen er en lastetilstand, eller optional chaining (user?.name).
• Tomme data. En ny konto har ingen poster, og koden forutsetter at listen har minst ett element.
• Uventet datastruktur. Et API returnerte et feilobjekt i stedet for listen koden forventet.
• En manglende import etter at en fil ble omdøpt eller flyttet.
• Bruk av en nettleser-API under server-rendering, for eksempel window eller localStorage i en Next.js-serverkomponent.

Gi AI-en hele feilen, siden og hvem du var innlogget som:

Dashbord-siden er tom for nye brukere. Konsoll: TypeError: Cannot read properties of undefined (reading 'map') på ProjectList.tsx:18. Den fungerer for kontoen min, som har prosjekter. Fiks den slik at en tom konto viser «Ingen prosjekter ennå», og sjekk en ny konto i forhåndsvisningen.

Steg 5: Legg til en error boundary

I React kan én komponent som krasjer fjerne hele appen fra skjermen, og derfor gir en liten feil en helt tom side. En error boundary er en komponent som fanger rendringsfeil under seg og viser en reservemelding i stedet.

Legg til en error boundary rundt hovedrutene som viser «Noe gikk galt» med en Last inn på nytt-knapp, og logger feilen i konsollen. Behold header og navigasjon utenfor den, slik at de fortsatt vises.

Den retter ikke feilen, men besøkende ser en melding i stedet for en tom skjerm, og du ser hvor det brøt.

Steg 6: Ingen feil, men fortsatt tom

Hvis konsollen er ren og skriptene lastes:

• Sjekk fanen Elementer. Finnes det innhold inne i <div id="root">? Hvis ja, rendres det, men er usynlig: hvit tekst på hvit bakgrunn, opacity: 0, display: none, eller et element i fullskjerm som dekker det.
• Sjekk ruteren. Hvis ingen rute matcher den gjeldende URL-en og det ikke finnes en «ikke funnet»-rute, rendrer noen rutere ingenting. Legg til en fangrute som viser en 404-side.
• Sjekk monteringspunktet. Koden må montere seg i et element som finnes. Hvis index.html har id="app" og koden leter etter root, vises ingenting (og React logger vanligvis en feil).
• Sjekk en nettleserutvidelse. Prøv et privat vindu. Annonseblokkere blokkerer av og til skript med navn som analytics eller ads.

Tom bare etter at du oppdaterer en side?

Hvis hjemmesiden fungerer, men en oppdatering av /dashboard gir en tom side eller 404, forstår ikke serveren at den skal sende index.html for app-ruter. Det er et problem med fallback-ruting, som dekkes i hvordan du fikser 404-feil etter deploy.

Vanlige feil

• Å lese den siste feilen i stedet for den første. Den første røde linjen er vanligvis årsaken.
• Å sette miljøvariabler uten å bygge på nytt. Variabler i frontend låses under bygging.
• Å teste bare med din egen konto. Krasj for tomme kontoer er en av de vanligste årsakene til tomme sider.
• Å anta at deployen fungerte. Sjekk byggeloggen før du feilsøker koden.
• Å skylde på nettleserens cache for alt. En hard oppdatering utelukker det på sekunder; hvis siden fortsatt er tom, er det noe annet.

Tomme sider i Mythex

Hvis forhåndsvisningen er tom, sjekk først at appen kjører (åpne Kode → terminal), og be deretter Mythex starte riktig server, klikk Oppdater i verktøylinjen for forhåndsvisningen, eller bruk /fix. For en tom publisert URL foreslår dokumentasjonen å vente et minutt og hard-oppdatere, bekrefte at miljøvariabler og database ble satt opp før publisering, og sjekke hostkvoten din. Husk at en publisert app er et øyeblikksbilde: etter en retting må du publisere på nytt. Hvis en endring forårsaket problemet, rulles prosjektet tilbake med Gå tilbake til dette punktet på det siste gode svaret. Se Feilsøking og Feilsøking ved publisering i dokumentasjonen, og vår generelle guide til feilsøking av en AI-bygd app.

Sjekkliste for tom side

• Leste den første røde feilen i konsollen
• Sjekket fanen Nettverk for .js/.css-filer som gir 404 eller returnerer HTML
• Basis-stien stemmer med der appen serveres
• Bygget ble ferdig, og byggemappen er det som publiseres
• Alle miljøvariabler for frontend er satt på det publiserte bygget, og bygget på nytt
• Krasjet er fikset, også for tomme og nye kontoer
• Error boundary på plass, slik at fremtidige krasj viser en melding
• Fangrute for ukjente URL-er
• Testet etter en hard oppdatering og i et privat vindu

Spørsmål