Hinter einem statischen Build steht kein Server: Was in diesen Dateien falsch ist, ist für jeden Besucher falsch. React2Static prüft all das an Ihrer eigenen Build-Ausgabe, bevor Sie live gehen. Hier ist die vollständige Liste, mit der Lösung zu jedem Punkt.
Paketnamen, Pfade und Größen in den Beispielen unten sind nur Beispiele — der Builder setzt dort die Werte aus Ihrem eigenen Projekt ein.
Was Sie sehen
dist/
.env
index.html
assets/index-a3f1c2.jsDie komplette Datei ist für jeden Besucher herunterladbar. Tausche jeden Wert darin aus und halte .env aus dem Ordner heraus, den dein Build unverändert kopiert — meist public/.
Was Sie sehen
const apiKey = process.env.API_KEY;
fetch(url, { headers: { Authorization: `Bearer ${apiKey}` } });
// Vite turns process.env into {} — the header goes out as
// "Bearer undefined" and the API answers 401. No error in the console.Vite ersetzt process.env durch ein leeres Objekt — im Browser ist dieser Wert damit schlicht undefined. Keine Fehlermeldung, keine Warnung: die Anfrage geht ohne den Wert raus, und die API antwortet mit 401. Lies ihn stattdessen über import.meta.env.VITE_etwas, oder definiere ihn in vite.config.
Die Lösung
const apiKey = import.meta.env.VITE_API_KEY;Was Sie sehen
Uncaught ReferenceError: process is not defined
at index-a3f1c2.js:1:2043Im Browser gibt es kein process-Objekt — diese Zeile wirft direkt beim Laden einen Fehler, meist als weiße Seite. In Vite müssen Werte für den Browser über import.meta.env gelesen werden und VITE_ als Präfix tragen.
Die Lösung
const apiKey = import.meta.env.VITE_API_KEY;Was Sie sehen
const API = "http://localhost:3000/api";Es enthält http://localhost:3000/api. Diese Adresse existiert nur auf dem Rechner, auf dem gebaut wurde — für jeden Besucher schlägt die Anfrage fehl. Zeige stattdessen auf eine öffentliche URL.
Die Lösung
const API = "https://api.example.com";Was Sie sehen
dist/
assets/index-a3f1c2.js
assets/index-9b2e01.cssEin statischer Hoster liefert index.html als Einstiegsseite aus. Ohne sie sehen Besucher eine Dateiliste oder einen 404. Prüfe, was dein Build tatsächlich schreibt.
Was Sie sehen
<title>Vite + React + TS</title>Aktuell steht dort „Vite + React + TS“. Genau dieser Text erscheint in Suchergebnissen und geteilten Links. Ändere ihn in index.html.
Die Lösung
<title>Your product name — what it does, in one line</title>Browser-Tab und jedes Suchergebnis verwenden das <title>-Tag. Ergänze es in index.html.
Die Lösung
<title>Your product name — what it does, in one line</title>Suchmaschinen greifen sonst auf ein beliebiges Textfragment zurück. Der eine Satz in <meta name="description"> entscheidet, ob geklickt wird.
Die Lösung
<meta name="description" content="One clear sentence about what this page is for." />Handys rendern die Seite in Desktop-Breite und zoomen heraus — alles wird winzig. Ergänze <meta name="viewport" content="width=device-width, initial-scale=1"> in index.html.
Die Lösung
<meta name="viewport" content="width=device-width, initial-scale=1" />In Messengern und sozialen Netzwerken erscheint dein Link als nackte URL, ohne Titel und ohne Bild. Ergänze og:title, og:description und og:image.
Die Lösung
<meta property="og:title" content="Your product name" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://example.com/og.png" />Was Sie sehen
<link rel="icon" type="image/svg+xml" href="/vite.svg" />Tab und Lesezeichen zeigen ein leeres Blatt oder das geerbte Vorlagen-Logo. Lege ein eigenes Favicon ab und verlinke es in index.html.
Die Lösung
<link rel="icon" href="/favicon.ico" sizes="any" />Screenreader wählen danach die Aussprache, Browser bieten danach eine Übersetzung an. Ergänze lang="de" oder die tatsächliche Sprache der Seite.
Die Lösung
<html lang="en">Indexiert wird die Seite auch so, aber in der robots.txt verweist du Crawler auf deine Sitemap. Wir können sie im Schritt „Live gehen“ ergänzen.
Die Lösung
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xmlWas Sie sehen
dist/assets/index-a3f1c2.js 2,418.55 kB │ gzip: 731.20 kB
(!) Some chunks are larger than 500 kB after minification.Über Mobilfunk sind das Sekunden weißer Bildschirm, bevor überhaupt etwas erscheint. Die schweren Teile per dynamischem import() abzutrennen verkürzt den ersten Ladevorgang meist deutlich.
Die Lösung
const Editor = lazy(() => import('./Editor'));Was Sie sehen
dist/assets/hero-8f2a1b.png 4,102.11 kBGroße Bilder und Schriften verzögern die erste Darstellung. Bilder nach WebP zu konvertieren und auf die tatsächlich angezeigte Größe zu skalieren nimmt den Großteil des Gewichts.
Legen Sie Ihre ZIP in den Builder. Er führt den echten Build in Ihrem Browser aus, und wenn etwas kaputtgeht, zeigt er auf die entscheidende Zeile, statt Ihnen das ganze Log zu reichen.
Builder öffnen