Katalog nejčastějších chyb

Tahle lekce je referenční. Nemusíš ji číst celou – vrať se k ní, až něco z toho uvidíš.

Bílá stránka

Co to znamená: aplikace spadla při vykreslování.

Kde hledat: konzole prohlížeče. Skoro vždycky tam je červená hláška s konkrétním souborem.

Nejčastější příčina: čtení vlastnosti z něčeho, co ještě neexistuje – typicky data, která se teprve načítají.

„Cannot read properties of undefined“

Co to znamená: „Chtěl jsem přečíst X z něčeho, co je prázdné.“

Nejčastější chyba v celém webovém vývoji.

Co zkusit: zeptej se, odkud ta hodnota má přijít a proč nepřišla. Není to jen o tom přidat kontrolu – je to o tom zjistit, jestli tam data měla být.

Mám tuhle chybu:

[HLÁŠKA]

Zajímá mě příčina, ne rychlá záplata:
1. Odkud se ta hodnota bere?
2. Proč v tuhle chvíli chybí?
3. Je prázdná hodnota v tomhle místě legitimní stav (třeba načítání),
 nebo je to známka toho, že se něco nepovedlo dřív?

Podle odpovědi navrhni opravu.

„Module not found“ / „Cannot find module“

Co to znamená: kód chce použít balíček nebo soubor, který neexistuje.

Co zkusit:

1. Balíček není nainstalovaný → npm install.
2. Překlep v cestě k souboru.
3. Soubor byl přejmenovaný nebo smazaný a někde na něj zbyl odkaz.

Podrobně v lekci o balíčcích a závislostech.

„Port 3000 is already in use“

Co to znamená: vývojový server už na tom portu běží. Nejspíš jsi zapomněl zavřít předchozí.

Co zkusit: najdi okno terminálu, kde běží, a ukonči ho (Ctrl + C). Nebo nech server spustit na jiném portu.

# ukončení běžícího serveru: Ctrl + C v jeho okně$npm run dev -- -p 3001

Stránka vypadá jako neupravený text

Co to znamená: nenačetly se styly.

Co zkusit: obnovit stránku s vyprázdněním cache (Ctrl + Shift + R, na macOS Cmd + Shift + R). Když to nepomůže, podívej se do terminálu – build stylů nejspíš selhal.

Chyba 404

Co to znamená: adresa neexistuje.

Co zkusit:

1. Překlep v adrese.
2. Stránka se jmenuje jinak, než si myslíš.
3. Odkaz vede na starou adresu, která se přejmenovala.

Chyba 500

Co to znamená: chyba na serveru. Prohlížeč o ní nic víc neví.

Co zkusit: log serveru. V konzoli prohlížeče najdeš jen to, že požadavek selhal – vysvětlení je na druhé straně.

Chyba 401 nebo 403

Co to znamená: chybí oprávnění. 401 = nejsi přihlášený, 403 = jsi, ale nesmíš.

Co zkusit: u volání cizí služby to bývá špatný nebo chybějící API klíč. Zkontroluj proměnné prostředí.

Funguje to lokálně, ale ne naostro

Nejčastější a nejotravnější kategorie.

1. Chybějící proměnné prostředí

   Číslo jedna s velkým náskokem. .env.local se nenahrává, hodnoty musíš nastavit ve službě, kde aplikace běží.

2. Rozdíl mezi vývojovým a produkčním buildem

   Lokálně běží vývojová verze, která je shovívavější. Spusť npm run build a chyba se často ukáže i doma.

3. Velikost písmen v názvech souborů

   Tvůj počítač může být k velikosti písmen lhostejný, server ne. Tlacitko.tsx a tlacitko.tsx jsou pak dva různé soubory.

4. Odkazy na lokální adresu

   Někde v kódu zbylo http://localhost:3000.

Aplikace mi funguje lokálně, ale po nasazení ne.

Chyba naostro: [POPIS NEBO HLÁŠKA Z LOGU]

Projdi mi obvyklé příčiny tohohle rozdílu a zkontroluj je v projektu:
1. Proměnné prostředí – které projekt potřebuje a jsou nastavené?
2. Projde produkční build lokálně?
3. Nejsou v kódu odkazy na localhost nebo lokální cesty?
4. Nesouhlasí někde velikost písmen v názvu souboru s importem?

U každého bodu napiš, jestli je v pořádku, nebo co jsi našel.

Změna se neprojeví

Co zkusit v tomhle pořadí:

1. Obnov stránku s vyprázdněním cache.
2. Podívej se do terminálu, jestli build neselhal.
3. Ověř, že jsi ve správném souboru – v projektu může být podobný jinde.
4. U nasazené verze zkontroluj, jestli se změna vůbec nahrála.

Instalace balíčku selhala

Co zkusit: přečti si, co hláška říká. Bývá to jedno ze tří:

• Nekompatibilní verze → nech si vysvětlit, co s čím koliduje.
• Chybějící oprávnění → neinstaluj přes sudo, řeš to jinak.
• Chyba sítě → zkus znovu.